logo

8bitcn/ui

DocsComponentsBlocksThemesSponsors
Sections
  • Get Started
  • Components
  • Blocks
Getting Started
Blocks
    Components
    • Accordion
    • Alert Dialog
    • Alert
    • Avatar
    • Badge
    • Breadcrumb
    • Button
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Collapsible
    • Combo Box
    • Command
    • Context Menu
    • Date Picker
    • Dialog
    • Drawer
    • Dropdown Menu
    • Empty
    • Enemy Health Display
    • Health Bar
    • Hover Card
    • Input OTP
    • Input
    • Item
    • Kbd
    • Label
    • Mana Bar
    • Menubar
    • Navigation Menu
    • Pagination
    • Popover
    • Progress
    • Radio Group
    • Resizable
    • Retro Mode Switcher
    • Scroll Area
    • Select
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Spinner
    • Switch
    • Table
    • Tabs
    • Textarea
    • Theme Selector
    • Toast
    • Toggle Group
    • Toggle
    • Tooltip
    • XP Bar

    Spinner

    PreviousNext

    Displays an 8-bit spinner component.

    SliderSwitch

    On This Page

    InstallationUsageVariantsSizeColorButtonBadge
    SponsorsSponsored by
    Shadcn Blocks

    Shadcn Blocks

    The ultimate block set for Shadcn

    Shadcn Studio

    Shadcn Studio

    Shadcn blocks & templates

    Shadcn UI Kit

    Shadcn UI Kit

    Admin dashboards, blocks, components & examples

    Built by OrcDev and Contributors. The source code is available on GitHub.

    8-bit Spinner component

    Open in v0

    Classic

    Diamond

    Installation


    pnpm dlx shadcn@latest add @8bitcn/spinner

    Usage


    Variants


    Use the variant prop to change the style of the spinner. Defaults to classic.

    Size


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

    Color


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

    Button


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

    Badge


    You can also use a spinner inside a badge.