basecoat/docs/src/components/spinner.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Spinner	An indicator that can be used to show a loading state.	label id Usage usage label id children Examples examples label id Size example-size label id Color example-color label id Button example-button label id Badge example-badge label id Input Group example-input-group label id Empty example-empty label id Item example-item

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% lucide "circle-alert" %}

There is no dedicated Spinner component in Basecoat.

{% set code_default %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}

Processing payment...

$100.00

{% endset %}

{{ code_preview("spinner-default", code_default, class="w-full max-w-xs") }}

Usage

Spinners are pure HTML using the loader-circle Lucide icon with the animate-spin Tailwind utility. Add role="status" and aria-label="Loading" for accessibility.

Browse the examples below and copy the pattern that fits your needs.

Examples

Size

Use the size-* utility class to change the size of the spinner.

{% set code_size %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-3 animate-spin" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-8 animate-spin" } %}

{% endset %}

{{ code_preview("spinner-size", code_size) }}

Color

Use the text-* utility class to change the color of the spinner.

{% set code_color %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-red-500" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-green-500" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-blue-500" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-yellow-500" } %} {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-purple-500" } %}

{% endset %}

{{ code_preview("spinner-color", code_color) }}

Button

Add a spinner to a button to indicate a loading state.

{% set code_button %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Loading... {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Please wait {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Processing

{% endset %}

{{ code_preview("spinner-button", code_button) }}

Badge

{% set code_badge %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Syncing {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Updating {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} Processing

{% endset %}

{{ code_preview("spinner-badge", code_badge) }}

Input Group

Input groups can have spinners positioned inside them.

{% set code_input_group %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin text-muted-foreground" } %} Validating... {% lucide "arrow-up" %}

{% endset %}

{{ code_preview("spinner-input-group", code_input_group, class="w-full max-w-md") }}

Empty

Use a spinner in empty states to indicate a loading or processing state.

{% set code_empty %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4" } %}

Processing your request

Please wait while we process your request. Do not refresh the page.

Cancel

{% endset %}

{{ code_preview("spinner-empty", code_empty) }}

Item

{% set code_item %}

{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4 text-muted-foreground" } %}

Downloading...

129 MB / 1000 MB

Cancel

{% endset %}

{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}