Skeleton
The Skeleton component can be used as a loading animations or space-fillers while waiting for the actual content to load.
Examples
Base
The length of the loading beam can be defined using the width
prop.
Circle
Make in round using the circle
prop.
Sizes
The component can be displayed in different sizes using the size
prop.
Position
Use the position
prop to define the vertical placement.
Skeleton component
A placeholder for content to load.
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 | - | From config: skeleton: { |
circle | Show a circle shape | boolean | - | false |
count | Number of shapes to display | number | - | 1 |
height | Custom height | number | string | - | |
override | Override existing theme classes completely | boolean | - | |
position | Skeleton position in relation to the element | "centered" | "left" | "right" | left , centered , right | "left" |
rounded | Enable rounded style | boolean | - | From config: skeleton: { |
size | Size of skeleton | string | small , medium , large | |
width | Custom width | number | string | - |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
positionClass | Class of the root element with position. | position | left | |
itemClass | Class of the item element. | |||
sizeClass | Class of the item element with size. | size | small | |
animatedClass | Class of the item element when animated. | |||
roundedClass | Class of the item element when rounded. | rounded |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$skeleton-background | linear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%) |
$skeleton-border-radius | var(--#{$prefix}base-border-radius) |
$skeleton-duration | 1.5s |
$skeleton-margin | 0.5rem 0 0 0 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$skeleton-duration | 1.5s |
$skeleton-margin-top | 0.5rem |
$skeleton-border-radius | css.getVar("radius") |
See ➜ 📄 Full scss file
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