deliteful/ProgressIndicator

The deliteful/ProgressIndicator widget indicates that a task is ongoing. It displays a round spinning graphical representation. For a task whose end is determined, you can provide a number from 0 to 100 to indicate the level of progression.

Overview of the Progress Indicator by theme (bootstrap, iOS, Holodark)

ProgressIndicator Bootstrap ProgressIndicator Bootstrap ProgressIndicator iOS ProgressIndicator iOS ProgressIndicator Holodark ProgressIndicator Holodark

Table of Contents

Element Instantiation
Element Configuration
Element Styling
Enterprise Use
See also

Element Instantiation

See delite/Widget for full details on how instantiation lifecycle is working.

Declarative Instantiation

<html>
  <d-progress-indicator id="pi" active="true"></d-progress-indicator>
</html>

ProgressIndicator must be active to become visible and start its animation.

  require([
    "delite/register",
    "deliteful/ProgressIndicator"
  ], function (register) {
     register.parse();
     // perform some tasks...
     // then deactivate the progress indicator
     var pi = document.getElementById("pi");
     pi.active = false;
});

Programmatic Instantiation

  require([
    "delite/register",
    "deliteful/ProgressIndicator"
  ], function (register, ProgressIndicator) {

     var pi = new ProgressIndicator({active: true});
     pi.placeAt(document.body);
     pi.startup();

     register.parse();
     //do some other tasks (load data...)

     pi.active = false;
     pi.destroy(); //this instance won't be reused, so destroy it.
});

Element Configuration

Determinate vs indeterminate

By default, deliteful/ProgressIndicator is indeterminate in a sense it doesn't indicate the level of completion of the ongoing task: it just spin until it is deactivated. ProgressIndicator is indeterminate as long as ProgressIndicator.value = NaN

Animation speed

The speed attribute lets you change the relative speed of the animation. Accepted values are "slow", "normal" and "fast". Other values are converted to "normal". Note that the actual/real speed of the animation depends of the device/os/browser capabilities.

Element Styling

Supported themes

This widget provides default styling for the following delite themes:

CSS Classes

Style is defined by the CSS classes from the themes of the widget. CSS classes are bound to the structure of the widget declared in its template deliteful/ProgressIndicator/ProgressIndicator.html

class name applies to
d-progress-indicator the ProgressIndicator widget node
d-progress-indicator text the child node which contains the text to display when a value is set
d-progress-indicator-lines the child node which declare the 12 lines of the ProgressIndicator

Customizing the colors

Here is an example that shows how to set the lines and the text in red:

<html>
  <d-progress-indicator id="pi"></d-progress-indicator>
</html>

#pi .d-progress-indicator-lines {
  stroke: red;
}
#pi.d-progress-indicator text {
  fill: red;
}

Customizing the size

Default widget size is 40x40px on all themes. You may use width and height standard CSS properties to specify the size.

Example of ProgressIndicator which fills its container

<d-progress-indicator style="width: 100%; height: 100%"></d-progress-indicator>

Note the the text size automatically stretch/expand itself, so you do not have to set/change the font size.

Enterprise Use

Accessibility

type status comment
Keyboard N/A No user interaction
Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers.
Screen Reader no There is no ARIA role for progress indicator, for long running tasks that require sounds feedback, consider using deliteful/ProgressBar

Browser Support

This widget supports all supported browsers without any degraded behavior.

See also

Samples