Skeleton
A placeholder for content to load
Class props
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
animationClass | Class of the skeleton animation. | |||
itemClass | Class of the skeleton item. | |||
itemRoundedClass | Class of the skeleton item rounded. | rounded | ||
positionClass | Class of the skeleton position. | position | left | |
rootClass | Class of the root element. | |||
sizeClass | Class of the skeleton size. | size | small |
Skeleton component
html
<o-skeleton></o-skeleton>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Show or hide loader | boolean | - | true |
animated | Show a loading animation | boolean | - | true |
circle | Show a circle shape | boolean | - | |
count | Number of shapes to display | number | - | 1 |
height | Custom height | number|string | - | |
override | boolean | - | ||
position | Skeleton position in relation to the element | string | left , centered , right | 'left' |
rounded | Rounded style | boolean | - | true |
size | Size of skeleton | string | small , medium , large | |
width | Custom width | number|string | - |
Sass variables
Current theme ➜ Oruga Base
SASS Variable | Default |
---|---|
$skeleton-background | linear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%) |
$skeleton-border-radius | $base-border-radius |
$skeleton-duration | 1.5s |
$skeleton-margin | 0.5rem 0 0 0 |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
SASS Variable | Default |
---|---|
$skeleton-background | linear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%) |
$skeleton-border-radius | $base-border-radius |
$skeleton-duration | 1.5s |
$skeleton-margin | 0.5rem 0 0 0 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$skeleton-bg-color | $dark-bg-subtle |
$skeleton-bg | linear-gradient( 90deg, $skeleton-bg-color 25%, rgba($skeleton-bg-color, 0.5) 50%, $skeleton-bg-color 75%) |
$skeleton-duration | 1.5s |
$skeleton-margin | 0.5rem 0 0 0 |
See ➜ 📄 Full scss file