(Difference between revisions)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search
tapla (Talk | contribs)
(Created page with '__NOTOC__ __NOEDITSECTION__ {{CodeSnippet |id=  |platform= |devices=Nokia N97 |category=Web Runtime (WRT) |subcategory=Guarana UI, UI |creationdate=November 24, 2009 |keywor…')
tapla (Talk | contribs)
Line 4: Line 4:
|devices=Nokia N97
|devices=Nokia N97, Nokia 5800 XpressMusic
|category=Web Runtime (WRT)
|category=Web Runtime (WRT)
|subcategory=Guarana UI, UI
|subcategory=Guarana UI, UI

Revision as of 11:39, 16 December 2009

Article Metadata
Tested with
Devices(s): Nokia N97, Nokia 5800 XpressMusic
Created: (24 Nov 2009)
Last edited: tapla (16 Dec 2009)


This code snippet demonstrates how to customize a Guarana UI busy indicator. You can download the component library from Forum Nokia. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet Adding a Guarana UI busy indicator on a web page.

To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded e.g. from the Ajaxload Web site. After that, replace the themes/nokia/base/images/busyindicator.gif with your own animation. Lastly, customize the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:

window.busyIndicator = new Nokia.Busy({
element: "#busyIndicatorContainer",
width: 126,
height: 22,
autoOpen: false


The default GIF animation of a busy indicator is replaced with own animation.

See also

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

110 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.