salla-skeleton
A grey loading placeholder block.
A grey loading placeholder block. Use it to reserve the space of content that is still loading,
for example a product image or a line of text. Give it a width and height, and use type="circle" for avatars.
Use it
In HTML or JSX, use the tag <salla-skeleton> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaSkeleton } from '@salla.sa/twilight-components-react/skeleton';Try it
Example
import { SallaSkeleton } from '@salla.sa/twilight-components-react/skeleton';
export function Example() {
return (
<>
<SallaSkeleton width="200px" height="16px" />
<SallaSkeleton type="circle" width="48px" height="48px" />
</>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
height | height | Height of the skeleton as a CSS length, for example 16px or 4rem. | string | '100%' |
type | type | Shape of the skeleton: normal (rectangle) or circle. For a true circle, use the same width and height. | "circle" | "normal" | 'normal' |
width | width | Width of the skeleton as a CSS length, for example 100px, 50% or 10rem. | string | '100%' |
Related
Used inside: <salla-basket-gap>, <salla-bought-together>, <salla-bullet-delivery>, <salla-cart-summary-card>, <salla-conditional-offer>, <salla-delivery-promise>, <salla-gifting>, <salla-localization-modal>, <salla-loyalty>, <salla-multiple-bundle-product-options-modal>, <salla-next-order-coupon>, <salla-offer-modal>, <salla-orders>, <salla-product-size-guide>, <salla-rating-modal>, <salla-rating-modal-v2>, <salla-scopes>, <salla-tiered-offer>, <salla-user-profile>.
salla-progress-bar
A horizontal progress bar with optional header, value/target labels and a message, mainly used to show how much of a target (for example a donation goal) has been reached.
salla-slider
Swiper-based slider for banners, product carousels, testimonials and product image galleries with thumbnails.