Search documentation v0.6.1

Spinner

Visualize progress with loading indicators

Source ↗️ Report Issue ↗️

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.

Preview
How to use Spinners in Astro
---
import { Spinner } from 'webcoreui/astro'
---
<Spinner />
How to use Spinners in Svelte
<script>
import { Spinner } from 'webcoreui/svelte'
</script>
<Spinner />
How to use Spinners in React
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:

Spinners with custom size
Spinners with custom width
<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:

Dashed spinner
Small dashes
Four dashes
Three dashes
<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
}
PropPurpose
color Sets the color of the spinner.
width Sets the width of the stroke of the spinner.
speed Sets the speed of the spinner.
size Sets the size of the spinner.
dashArray Sets the stroke-dasharray attribute of the SVG element.

Request improvement for this page