Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Posts: 34
Registered: ‎08-01-2012
My Device: Playbook
My Carrier: None
Accepted Solution

Loading image with a true transparent background?

I am wanting to use a loadin image over a pattern background.  All of the loading .gif files that I can find are not a true transparent background, but have a bit of color that looks really bad on a transparent bg.

 

Does webworks provide any native loading image or does anyone have a solution to this?

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Loading image with a true transparent background?

.gif files do not have alpha channel possibility for transparent backgrounds. For loading icons/animations have a closer look to the Ajaxload.info website for some nice looking examples.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Loading image with a true transparent background?

BTW: depending on the device you are developing for, have a closer look to the bbUI.js example for activity indicators. WebWorks as its own is mainly an adapter to the underlying WebView and OS to be able to access hardware (eg. GPS, ...), I can't remember on something for the look+feel to be directly integrated in WebWorks.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Contributor
Posts: 34
Registered: ‎08-01-2012
My Device: Playbook
My Carrier: None

Re: Loading image with a true transparent background?

This is for Playbook.

 

The ones on the Ajaxload.info website are still .gif files that don't have a "clean" transparency.  They still have some background color that does not work over pattern backgrounds.

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Loading image with a true transparent background?

Oh, my mistake. But what is wrong when using them over pattern backgrounds?

 

What about CSS3 transformations to create a spinner/loading animation? See this example or try searching for "CSS3 transformation animation": http://blog.crazyegg.com/2012/05/08/loading-spinners-css3-animation/


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Contributor
Posts: 34
Registered: ‎08-01-2012
My Device: Playbook
My Carrier: None

Re: Loading image with a true transparent background?

Oh, I was hoping for true transparency with alpha, but oh well, I think using a loading gif will be ok, since it is so small.

 

Thanks.

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Loading image with a true transparent background?


zedsaid wrote:

Oh, I was hoping for true transparency with alpha, but oh well, I think using a loading gif will be ok, since it is so small.

 

Thanks.


For the future I would give the CSS3 animations, I mentioned above, a change maybe with a fallback to your loading gif to have some nice effects for supported browsers/devices. To check animation support mozilla gave an explanation to detect CSS animations on there developer pages.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.