OrugaSkeleton
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