Revision as of 11:39, 16 December 2009 by tapla (Talk | contribs)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search

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.

108 page views in the last 30 days.