---
layout: doc
title: deliteful/ProgressIndicator
---
# 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)*
##### Table of Contents
[Element Instantiation](#instantiation)
[Element Configuration](#configuration)
[Element Styling](#styling)
[Enterprise Use](#enterprise)
[See also](#seealso)
## Element Instantiation
See [`delite/Widget`](/delite/docs/master/Widget.md) for full details on how instantiation lifecycle is working.
### Declarative Instantiation
```html
```
ProgressIndicator must be active to become visible and start its animation.
```js
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
```js
require([
"delite/register",
"deliteful/ProgressIndicator"
], function (register, ProgressIndicator) {
var pi = new ProgressIndicator({active: true});
pi.placeAt(document.body);
register.parse();
//do some other tasks (load data...)
pi.active = false;
pi.destroy(); //this instance won't be reused, so destroy it.
});
```
## Element Configuration
The following properties can be set on the widget to configure it:
* `active`: Set to false to hide the widget and stop any ongoing animation. Set to true to show the widget: animation
automatically starts unless you set a number to the "value".
* `value`: A value from 0 to 100 that indicates a percentage of progression of an ongoing task. Defaults to NaN.
* `speed`: The relative speed of the spinning animation. Accepted values are "slow", "normal" and "fast". Other values
are converted to "normal".
### Determinate vs indeterminate
ProgressIndicator is indeterminate as long as `ProgressIndicator.value = NaN`, which is the default value.
`deliteful/ProgressIndicator` is indeterminate in the sense that it doesn't indicate the level of completion
of the ongoing task, it will spin until it is deactivated.
### 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:
* bootstrap
* ios
* holodark
### 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
```
```css
#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. We recommend that you keep `width` and `height` equal (or close) in order to get nicer results.
*Example of ProgressIndicator which fills its container*
```html
```
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
- deliteful/samples/ProgressIndicator-basic.html
- deliteful/samples/ProgressIndicator-overlay.html
- deliteful/samples/ProgressIndicator-percentage.html