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. |