[Component]: <Spinner Component>

[buseselvi]

Figma Design Document

Spinner Design Document

Implementation

General usage example:

<bl-spinner></bl-spinner>

Rules

• Spinner can be used to indicate loading states.
• Custom sizes and colors can be applied using CSS variables or inline styles.
• The spinner can be displayed in overlay mode to cover its parent element.

Usage Examples

Default size is var(--bl-font-size-m) and default color is var(--bl-color-primary). But any size and color can be set like this:

<bl-spinner size="32px" color="#FFF"></bl-spinner>

The color and size can be set like this:

<bl-spinner size="3rem" color="var(--bl-color-success)"></bl-spinner>

The disabled can be set like this:

<bl-spinner disabled></bl-spinner>

The overlay can be set like this:

<bl-spinner overlay size="var(--bl-font-size-l)" color="var(--bl-color-secondary)"></bl-spinner>

API Reference

Attributes

Attribute	Description	Default Value
size	Size of the spinner (e.g., 3rem, 32px, var(--bl-font-size-m))	var(--bl-font-size-m)
color	Color of the spinner	var(--bl-color-primary)
disabled	Whether the spinner is disabled	false
overlay	Whether the spinner is in overlay mode	false