Progress Bar

Native HTML progress bars

To use a bulma progress bar in your application, you need to import the BulmaProgressbarModule by adding the following lines to your app.module.ts file.

import { BulmaProgressbarModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaProgressbarModule]
  // ...
})
export class AppModule {}

Basic

To display the Progressbar component in your Angular application, add the buProgress directive in the <progress> element.

Directive Description
buProgress For displaying a progress bar element as Bulma progress bar
Properties Description
theme Set the theme of the progress bar
size Set the size of the progress bar
value Set the current value of the progress bar. If not set then the progress bar will be displayed as an indeterminate progress bar
max Set the upper limit of value property of the progress bar. If not set then the value in the value property is considered as max

Default

<progress buProgress value="15" max="100"></progress>

Sizes

You can set the size of the progress bar using one the 4 size options:

  • small
  • normal
  • medium
  • large

<progress buProgress size="small" value="15" max="100"></progress>
<progress buProgress value="30" max="100"></progress>
<progress buProgress size="medium" value="45" max="100"></progress>
<progress buProgress size="large" value="60" max="100"></progress>

Themes

You can change the theme of the progress bar using one the 9 theme options:

  • light
  • black
  • dark
  • primary
  • link
  • info
  • success
  • warning
  • danger

<progress buProgress theme="light" value="5" max="100"></progress>
<progress buProgress theme="black" value="10" max="100"></progress>
<progress buProgress theme="dark" value="15" max="100"></progress>
<progress buProgress theme="primary" value="25" max="100"></progress>
<progress buProgress theme="link" value="30" max="100"></progress>
<progress buProgress theme="info" value="45" max="100"></progress>
<progress buProgress theme="success" value="60" max="100"></progress>
<progress buProgress theme="warning" value="75" max="100"></progress>
<progress buProgress theme="danger" value="90" max="100"></progress>

Indeterminate

The indeterminate progress bar is used to show that some progress is going on, but the actual duration is not yet determined. If you do not set the value property of the progress bar then it will be displayed as an indeterminate progress bar.

<progress buProgress theme="primary" size="small" max="100"></progress>
<progress buProgress theme="danger" max="100"></progress>
<progress buProgress theme="dark" size="medium" max="100"></progress>
<progress buProgress theme="info" size="large" max="100"></progress>