Skip to content

Component library

Progress Bar component

Last updated 2 November 2026

Creates a progress bar UI that automatically calculates the progress count.

Live demo

<ins-progress-bar
  text="Exported 100 of 1000 items"
  total="1000"
  progress="100"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-progress-bar>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
text string - any Defines the text to be displayed during progress
total number - any Defines the total count of the progress
progress number - any Defines the progress count of the progress bar
hidden boolean false true, false Defines if the progress bar should be hidden or not

Examples

Default State

<ins-progress-bar></ins-progress-bar>

No Text State

<ins-progress-bar
  total="1000"
  progress="100">
</ins-progress-bar>