Skip to content

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.

Updated on v2.0.0

Linear Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Linear-Alt Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Spinner Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Grow Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Linear-Alt Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Spinner Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

Grow Loader

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et sollicitudin.

API Reference

PropertyTypeDefaultDescription
fixed-positionBooleanfalseSets the inline css-style position property value. If true then the inline css-style position property is set to fixed.
overlay-colorString'#000'Backdrop overlay color in hex color formatted value.
overlay-opacityNumber0.5Backdrop overlay opacity value.
show requiredBooleanfalseThe component state, show or hide.
spinner-colorString'primary'The spinner color. Any MDBootstrap Color and Material Color variants can be used.
spinner-diameterNumber36The spinner diameter.
spinner-thicknessNumber5The spinner thickness. Only valid for linear and linear-alt variants.
spinner-type deprecatedStringUse type property instead.
typeString'linear'The spinner types variant. Available types are: linear, linear-alt, spinner, and grow. v2.0.0
transitionString'fade'Animation transition to use when the component becomes visible or invisible.
z-indexNumber100Sets the inline css-style z-index property.

Released under the BSD-3-Clause License.