Customising a Guarana UI busy indicator
Article Metadata
Tested with
Article
Overview
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
});
Postconditions
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.
- The patched, executable application that can be used to test the features described in this snippet is available for download at Media:customizing_a_guarana_ui_busy.zip.
- You can view all the changes that are required to implement the above-mentioned features (compared to the Adding a Guarana UI busy indicator on a web page snippet). The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:customizing_a_guarana_ui_busy.diff.zip.
- For general information on applying the patch, see Using Diffs.
- For unpatched stub applications, see Example stub.
