Very simple to implement and remove.
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
.
You can change the type of animation with the type
property and the animations so far are:
You can change the color of the loading with the property color
.
WARNING
Only RGB and HEX colors are supported.
If you need to change the background of the loading, you can use the property background
.
WARNING
Only RGB and HEX colors are supported.
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
.
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 |