Progress

  1. Home
  2. Material-Components
  3. Progress
Alerts Cards Progress
Register

Circular Progress

Basic Circular Progress

Circular progress is built with a group of HTML elements, below is a detailed example.

Colouring Circular Progress

Add additional colour classes (e.g. brand colours: -primary, -secondary, or helper colours: -danger, -info, -success, -warning) to change the appearance of individual circular progress.

Linear Progress

Indeterminate Linear Progress

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Create an indeterminate linear progress by adding .progress-bar-indeterminate class.

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now