Pages UI
Search…
Progress Bar
Pages Progress bar / circular

Importing

First import it to your app module or any submodule as you wish
1
import { ProgressModule } from '../@pages/components/progress/progress.module';
2
@NgModule({
3
imports: [ProgressModule,...]
4
})
5
export class AppModule(){}
Copied!

Usage

HTML
1
<pg-progress type="bar" color="primary" value="35" thick="true"></pg-progress>
2
3
<pg-progress type="bar" indeterminate="true" thick="true"></pg-progress>
4
5
<pg-progress type="circle" color="complete" value="75" ></pg-progress>
6
7
<pg-progress type="circle" value="75" thick="true"></pg-progress>
Copied!

API

parameter
Instructions
Types of
Defaults
type
Type of progress
string
bar / circle
color
Bootstrap primary colors
string
primary, success, etc
value
Percentage of progress
integer
0
indeterminate
When progress value is unknown
boolean
false
thick
Will increase the thickness
boolean
true
Copy link