Spinner

Visualize progress with loading indicators

Use the Spinner component to inform users about ongoing processes, such as loading content or processing data. They are crucial for managing user expectations and enhancing the user experience during wait times.

---
import { Spinner } from 'webcoreui/astro'
---

<Spinner />

<script>
    import { Spinner } from 'webcoreui/svelte'
</script>

<Spinner />

import React from 'react'
import { Spinner } from 'webcoreui/react'

const Component = () => <Spinner />

export default Component

To configure the appearance and behavior of your spinners, you can override the following CSS variables:

html body {
    --w-spinner-color: #FFF;
    --w-spinner-width: 2px;
    --w-spinner-speed: 2s;
    --w-spinner-size: 30px;
    --w-spinner-dash: 8;
}

If you need to globally apply custom styles to your spinners, prefer the above solution. However, you can also configure each individual Spinner component trough the following props if you need different variants in the same application.

Sizes

Spinner sizes can be configured with the size and width props:

<Spinner size={15} />
<Spinner size={20} />
<Spinner size={25} />

<Spinner width={2} />
<Spinner width={5} />
<Spinner width={10} />

Styles

The appearance of your spinners can be configured via the color prop:

<Spinner color="#1dd1a1" />
<Spinner color="#48dbfb" />
<Spinner color="#f7aa61" />

Speed

To configure the speed of the spinner, assign a custom value to the speed prop in seconds:

<Spinner speed={1} />
<Spinner speed={3} />
<Spinner speed={5} />

Variants

The apperance of the Spinner component can also be changed using the --w-spinner-dash CSS variables, or setting the dashArray prop, which changes the stroke-dasharray attribute of the SVG element:

<Spinner dashArray={8} /> <!-- Dashed spinner -->
<Spinner dashArray={4} /> <!-- Small dashes -->
<Spinner dashArray={15} /> <!-- Four dashes -->
<Spinner dashArray={20} /> <!-- Three dashes -->

API

type SpinnerProps = {
    color?: string
    width?: number
    speed?: number
    size?: number
    dashArray?: number
}