Spinner

Import

import { Spinner } from '@blakeui/react';

Usage

import {Spinner} from "@blakeui/react";

export function SpinnerBasic() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
    </div>
  );
}

Colors

import {Spinner} from "@blakeui/react";

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-8">

Sizes

import {Spinner} from "@blakeui/react";

export function SpinnerSizes() {
  return (
    <div className="flex items-center gap-8">

Styling

Passing Tailwind CSS classes

import {Spinner} from '@blakeui/react';

function CustomSpinner() {
  return (
    <Spinner className="text-blue-500" />
  );
}

Customizing the component classes

To customize the Spinner component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Spinner component uses these CSS classes (View source styles):

Base & Size Classes

• .spinner - Base spinner styles with default size
• .spinner--sm - Small size variant
• .spinner--md - Medium size variant (default)
• .spinner--lg - Large size variant
• .spinner--xl - Extra large size variant

Color Classes

• .spinner--current - Inherits current text color
• .spinner--accent - Accent color variant
• .spinner--danger - Danger color variant
• .spinner--success - Success color variant
• .spinner--warning - Warning color variant

API Reference

Spinner Props