Progress Bar

Published on February 18, 2021, updated on June 01, 2021

Element: <ins-progress-bar>

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

Complete Example

Code Snippet

<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>

Default State

Code Snippet

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

No Text State

Code Snippet

<ins-progress-bar
  total="1000"
  progress="100">
</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

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.