configure()

The configure() method updates the default settings of the progress bar.

Usage

BProgress.configure({
  minimum: 0.08,
  maximum: 1,
  template: `<div class="bar"><div class="peg"></div></div>
             <div class="spinner"><div class="spinner-icon"></div></div>
             <div class="indeterminate"><div class="inc"></div><div class="dec"></div></div>`,
  easing: 'linear',
  positionUsing: 'width',
  speed: 200,
  trickle: true,
  trickleSpeed: 200,
  showSpinner: true,
  indeterminate: false,
  indeterminateSelector: '.indeterminate',
  barSelector: '.bar',
  spinnerSelector: '.spinner',
  parent: 'body',
  direction: 'ltr',
});

Typing

BProgress.configure(options: Partial<BProgressOptions>): BProgress;

BProgressOptions

interface BProgressOptions {
  minimum?: number;
  maximum?: number;
  template?: string | null;
  easing?: string;
  speed?: number;
  trickle?: boolean;
  trickleSpeed?: number;
  showSpinner?: boolean;
  parent?: HTMLElement | string;
  positionUsing?: BProgressPositionUsing;
  barSelector?: string;
  indeterminateSelector?: string;
  spinnerSelector?: string;
  direction?: BProgressDirection;
  indeterminate?: boolean;
}

BProgressPositionUsing

type BProgressPositionUsing =
  | 'translate3d'
  | 'translate'
  | 'margin'
  | 'width'
  | '';

BProgressDirection

type BProgressDirection = 'ltr' | 'rtl';

Options

Name	Type	Default	Description
minimum	number	0.08	The minimum percentage value between 0 and 1.
maximum	number	1	The maximum percentage value between 0 and 1.
template	string \| null	`<div class="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>`	The template of the progress bar. Classes needs to match with the `barSelector` and `spinnerSelector` options.
easing	string	'linear'	The easing of the progress bar.
positionUsing	BProgressPositionUsing	'width'	The position using of the progress bar.
speed	number	200	The speed of the progress bar.
trickle	boolean	true	If `true`, the progress bar will trickle.
trickleSpeed	number	200	The speed of the trickle.
showSpinner	boolean	true	If `true`, the progress bar will show the spinner.
barSelector	string	'.bar'	The bar selector.
spinnerSelector	string	'.spinner'	The spinner selector.
parent	HTMLElement \| string	'body'	The parent container of the progress bar. (if `template` is not `null`)
direction	BProgressDirection	'ltr'	The direction of the progress bar.
indeterminate	boolean	false	If `true`, the progress bar will be indeterminate.
indeterminateSelector	string	'.indeterminate'	The indeterminate selector.

Advanced Usage

Use `template: null`

template: null lets you add the progress bar to your code. You'll need to add an element like this:

<div class="bprogress" style="display: none">
  <div class="bar">
    <div class="peg"></div>
  </div>
  <div class="spinner">
    <div class="spinner-icon"></div>
  </div>
  <div class="indeterminate">
    <div class="inc"></div>
    <div class="dec"></div>
  </div>
</div>

It's very important to have a div with the bprogress class and the display:none style surrounding the template. For the template, classes need to match with the barSelector and spinnerSelector options.

Warning

When using a custom component for the progress bar, the component will not be dynamically added or removed from the DOM. Instead, it will simply toggle between display: block and display: none.
This behavior may impact performance, especially if the component involves complex rendering or layout calculations.

Use `indeterminate: true`

The indeterminate option set the progress bar to an indeterminate state. This is useful when the progress is unknown or indeterminate.

BProgress.configure({
  indeterminate: true,
});

Warning

When indeterminate is set to true, the progress bar will be indeterminate, and the inc(), dec(), trickle(), pause(), resume() and set() methods will not work.

configure()

On this page