salla-loading
A small animated spinner (an SVG ring) to show that something is loading.
A small animated spinner (an SVG ring) to show that something is loading.
It is centered inside its own box; set its size with the size prop.
The SVG is hidden from assistive technology (aria-hidden), so add your own text or aria-busy if the loading state must be announced.
Use it
In HTML or JSX, use the tag <salla-loading> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoading } from '@salla.sa/twilight-components-react/loading';Try it
web-components/salla-loading
Example
import { SallaLoading } from '@salla.sa/twilight-components-react/loading';
export function Example() {
return (
<SallaLoading size="24" color="#ff0000" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bgColor | bg-color | Color of the spinner's background ring, as any CSS color value. Defaults to #e5e7eb. | string | "#e5e7eb" |
color | color | Fill color of the spinner, as any CSS color value. When not set, the color comes from the --color-primary CSS variable. | string | undefined |
size | size | Sets the width and height of the spinner in pixels. A plain number or numeric string, for example 24. Defaults to 32. | number | string | 32 |
width | width | Sets the stroke of the circle (border) in pixels. Deprecated: Not read by the component, so it has no effect. It will be removed in the next major version. | number | string | 2 |
Related
Used inside: <salla-bottom-alert>, <salla-comments>, <salla-drawer>, <salla-file-upload>, <salla-loyalty-panel>, <salla-loyalty-points-history>, <salla-modal>, <salla-offer>, <salla-order-edit>, <salla-user-menu>.