Skip to content

Latest commit

 

History

History
70 lines (42 loc) · 1.51 KB

Progress-Bars.md

File metadata and controls

70 lines (42 loc) · 1.51 KB
Raw

Progress Bars

Introduction

abp-progress-bar is the abp tag for progress bar status.

Basic usage:

<abp-progress-bar value="70" />

<abp-progress-bar type="Warning" value="25"> %25 </abp-progress-bar>

<abp-progress-bar type="Success" value="40" strip="true"/>

<abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true"> %50 </abp-progress-bar>

<abp-progress-group>
    <abp-progress-part type="Success" value="25"/>
    <abp-progress-part type="Danger" value="10" strip="true"> %10 </abp-progress-part>
    <abp-progress-part type="Primary" value="50" animation="true" strip="true" />
</abp-progress-group>

Demo

See the progress bars demo page to see it in action.

Attributes

value

A value indicates the current progress of the bar.

type

A value indicates the background color of the progress bar. Should be one of the following values:

  • Default (default value)
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark

min-value

Minimum value of the progress bar. Default is 0.

max-value

Maximum value of the progress bar. Default is 100.

strip

A value indicates if the background style of the progress bar is stripped. Should be one of the following values:

  • false (default value)
  • true

animation

A value indicates if the stripped background style of the progress bar is animated. Should be one of the following values:

  • false (default value)
  • true