Loading

Very simple to implement and remove.

Default

To add a loading in any part of your application we have the global function $vs.loading (), and then when you want to remove it we have $vs.loading.close().

TIP

For the examples, the request or the delay is simulated with setTimeout.

Type

You can change the type of animation with the type property and the animations so far are:

  • point
  • radius
  • border
  • corners
  • sound
  • material

Color

You can change the color of the loading with the property color.

WARNING

Only RGB and HEX colors are supported.

Background

If you need to change the background of the loading, you can use the property background.

WARNING

Only RGB and HEX colors are supported.

Contained

To add a loading within a container, call the $ vs.loading () global function passing the container and the scale parameters. When you want to remove it we have $ vs.loading.close (), passing the same container parameter.

TIP

For the examples, the request or the delay is simulated with setTimeout.

Load Me!

API #

Name Type Parameters Description default
$vs.loading() Function Object function to open loading.
$vs.loading.close() Function function to close loading.
container HTMLElement, String Container that will be loading, pass a HTMLElement or query selector
color String RGB, HEX, primary, danger, success, dark, warning Color of loading.
type String default, point, reduis, border, corners, sound, material Change the type of animation. default
background String RGB, HEX, primary, danger, success, dark, warning loading background. rgba(255, 255, 255,.8)
text String Add a text on the loading .
textAfter Boolean Change the position of the text when loading . false
scale Number 0 - 1 change the scale of the animation. 1
clickEffect Boolean Add an animation to the user to click while loading is active. false