🤩
Windframe Import Update is finally here.

Progress

Progress

Angular Bootstrap Progress bar is a component which displays progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”.

Importing the Contrast Angular Bootstrap Progress Module

To use the Contrast Angular Bootstrap Progress component in your project you need to import ProgressModule.

typescript
import {ProgressModule } from 'cdbangular';

Circular Progress Color Variationsv

The CDBCircularProgress component takes in a value prop, indicating the progression of the particular metric we are trying to measure.

The max prop indicates the maximum value of the progress bar, and the min prop shows the minimum value of the progress bar. The text prop allows you to write texts on your progress bar. The color prop to change the background color of your progress bar.

Angular Bootstrap Progress Circular Bar

html
html
<CDBCircularProgress value=25 max=100 min=0 text="25%"></CDBCircularProgress>
<CDBCircularProgress value=50 max=100 min=0 text="50%" color="primary"></CDBCircularProgress>
<CDBCircularProgress value=95 max=100 min=0 color="secondary" text="95%"></CDBCircularProgress>
<CDBCircularProgress value=35 max=100 min=0 color="danger" text="35%"></CDBCircularProgress>
<CDBCircularProgress value=47 max=100 min=0 color="info" text="47%"></CDBCircularProgress>
<CDBCircularProgress value=100 max=100 min=0 color="success" text="100%"></CDBCircularProgress>

Circular Progress Size Variations

Use the size prop to specify how large or little you want your progress bar to be.

Angular Bootstrap Circular Progress Bar

html
html
<CDBCircularProgress value=25 max=100 min=0 text="25%" size="lg"></CDBCircularProgress>
<CDBCircularProgress value=50 max=100 min=0 text="50%" size="sm"></CDBCircularProgress>
<CDBCircularProgress value=95 max=100 min=0 text="95%" size="md"></CDBCircularProgress>

Rect Progress Default

Angular Bootstrap Progress Bar Rect Progress Default

html
html
<CDBProgress wrapperStyle="" value=69 text="69%"></CDBProgress>

Rect Progress Color Variants

Use the color prop to specify the color of your progress bar.

Angular Bootstrap Progress Bar Rect Progress Default

html
html
<div>
<CDBProgress value=10 text="10%" color="primary"></CDBProgress>
</div>
<div>
<CDBProgress value=20 text="20%" color="secondary"></CDBProgress>
</div>
<div>
<CDBProgress value=70 text="70%" color="success"></CDBProgress>
</div>
<div>
<CDBProgress value=40 text="40%" color="danger"></CDBProgress>
</div>
<div>
<CDBProgress value=90 text="90%" color="info"></CDBProgress>
</div>
<div>
<CDBProgress value=60 text="60%" color="warning"></CDBProgress>
</div>

Fixed Height

Use the height prop to specify the height of your progress bar in px.

Angular Bootstrap Progress Bar

html
html
<div>
<CDBProgress value=45 color="dark" height=30 text="45%"></CDBProgress>
</div>
<div>
<CDBProgress value=60 color="success" height=20 text="60%"></CDBProgress>
</div>
<div>
<CDBProgress value=80 color="danger" height=40 text="80%"></CDBProgress>
</div>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

API Reference: Contrast Progress Inputs

The table below shows the possible input of the Progress component.

NameTypeDefaultDescriptionExample
classStringAdds custom classes to bar wrapperclass="myClass"
barClassStringAdds custom classes to colorful barbarClass="myClass"
colorsStringdarkChanges bar color; accepts CDB predefined color classescolors="primary"
heightString10pxSets custom height of the barheight="50px"
maxNumber100Sets maximum value of progress barmax=200
minNumber0Sets minimum value of progress barmin=0
valueNumber0Sets current value of progress barvalue=40
wrapperStyleStringSets additional inline styles for bar's wrapperwrapperStyle="width: 50%"

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast