Loadings
Basic usage:
Show animation while loading data.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur deserunt dolor ducimus eligendi enim et explicabo inventore, ipsum laudantium minus nemo placeat quam qui repudiandae unde vitae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur deserunt dolor ducimus eligendi enim et explicabo inventore, ipsum laudantium minus nemo placeat quam qui repudiandae unde vitae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur deserunt dolor ducimus eligendi enim et explicabo inventore, ipsum laudantium minus nemo placeat quam qui repudiandae unde vitae!
Colors:
You can use name`s color ('primary', 'destructive-actions', etc)
Primary
Destructive
Success
Primary
Secondary
Warning
Active
Error
Black
White
Other
Custom Icon
Sizes:
You can use number or string for size element (40, '4rem', '100px')
20 px
40 px
60 px
5 rem
Attributes for Loading Component
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| active | Controls whether the component is visible or hidden. | Boolean | --- | true |
| full-page | Is full page size | Boolean | --- | false |
| color | Applies color to the element | String | Color Name | primary |
| size | Applies size to the element. You can use number (40, 60, ...) or string (40px, 4rem) | String / Number | --- | 40 |
| loader | Applies type to the element. | String | circles / stretch / load-icon | circles |
Slots
| Name | Description |
|---|---|
| default | Content of the Button |
Skeleton Loader:
The 'vc-skeleton-loader' component provides a user with a visual indicator that content is coming / loading. This is better received than traditional full-screen loaders.
Loading ...
Attributes for Skeleton Loading Component
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| height | Height of loader block | Number, String | --- | undefined |
| width | Width of loader block | Number, String | --- | undefined |
| max-width | Max Width of loader block | Number, String | --- | undefined |
| max-height | Max Height of loader block | Number, String | --- | undefined |
| type | Type of loader component. You can use pre-defined type and/or for circle and square number of components (Ex: circle@5) | String | card / row / circle / text / square / circle@{n} / square@{n} | row |
| row-height | Height of loader component (Ex: row). For circle and/or square row-height uses for width and height element | Number, String | --- | 1.5rem |
| text-loading | Text for text type | String | --- | Loading |