Revision as of 13:21, 24 November 2009 by tapla (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search

Article Metadata
Tested with
Devices(s): Nokia N97
Created: (24 Nov 2009)
Last edited: tapla (24 Nov 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.

68 page views in the last 30 days.