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

Released under the BSD-3-Clause License.