• The Lite version does not support radial progress bars
  • The JavaScript Progress Bar is in Beta Release

Progressbar Unit Test

Basic Progressbar

Horizontal Progressbar

Indeterminate value:

Specific value:

74


100% value:

100

Radial Progressbar

Indeterminate value:

Specific value:

74


100% value:

100

Overlap an Element

Horizontal Progressbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut lectus at enim suscipit lacinia. Aenean euismod, nisl nec pretium hendrerit, odio eros accumsan lectus, ac convallis ligula lacus sagittis felis. Pellentesque commodo placerat sagittis. Phasellus interdum arcu in dapibus tincidunt. Aenean eu purus fermentum urna vehicula rhoncus et id diam. Vestibulum nibh nunc, blandit in vestibulum eget, luctus sed lorem. In eu volutpat lectus. Morbi semper augue eget auctor pharetra.

Changing Default Styles

Pushing the progressbar to the bottom of the element and reduce it's height
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Radial Progressbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut lectus at enim suscipit lacinia. Aenean euismod, nisl nec pretium hendrerit, odio eros accumsan lectus, ac convallis ligula lacus sagittis felis. Pellentesque commodo placerat sagittis. Phasellus interdum arcu in dapibus tincidunt. Aenean eu purus fermentum urna vehicula rhoncus et id diam. Vestibulum nibh nunc, blandit in vestibulum eget, luctus sed lorem. In eu volutpat lectus. Morbi semper augue eget auctor pharetra.

Changing Default Styles

Pushing the progressbar to the right of the element
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Overlapping the Body

Special case when overlapping the body element.

Special case when overlapping the body element (radial progressbar). In this case, we will show an overlay on top of the body.

Colors & Text


Adding a Class Name for Complete Progressbar

100