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

Contributors


Last updated: March 21, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More