Mask Loader
BsMaskLoader is a component which are typically used for displaying a loading progress with backdrop overlay.
Overview
BsMaskLoader uses <bs-overlay> and <bs-progress> component internally and can be used to obscure parent element. With this you can provide information to User that the application is busy performing a background task. Example below will shows you how to use the <bs-mask-loader> component.
Content Title
Click the button to toggle the Mask Loader.
Loader Variants
BsMaskLoader comes with four type variants, which are: linear (default), linear-alt, spinner, and grow. This variant can be sets via variant property.
Linear Loader
Linear-Alt Loader
Spinner Loader
Grow Loader
Size and Color
You can change the Loader size simply by changing the spinner-diameter property value. And specify the value of the spinner-color property to change its color. Any MDBootstrap Color and Material Color variants can be applied to the spinner-color property. Additionally you can set the value of the overlay-color property to change the backdrop overlay color.
Linear Loader
Linear-Alt Loader
Spinner Loader
Grow Loader
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| fixed-position | Boolean | false | Sets the inline css-style position property value. If true then the inline css-style position property is set to fixed. |
| overlay-color | String | '#000' | Backdrop overlay color in hex color formatted value. |
| overlay-opacity | Number | 0.5 | Backdrop overlay opacity value. |
| show required | Boolean | false | The component state, show or hide. |
| spinner-color | String | 'primary' | The spinner color. Any MDBootstrap Color and Material Color variants can be used. |
| spinner-diameter | Number | 36 | The spinner diameter. |
| spinner-thickness | Number | 5 | The spinner thickness. Only valid for linear and linear-alt variants. |
| spinner-type deprecated | String | Use type property instead. | |
| type | String | 'linear' | The spinner types variant. Available types are: linear, linear-alt, spinner, and grow. v2.0.0 |
| transition | String | 'fade' | Animation transition to use when the component becomes visible or invisible. |
| z-index | Number | 100 | Sets the inline css-style z-index property. |