Component

Spinner

Also known as: Loader, Loading

A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.

63 Examples

Filter:

  • Spin

    Ant Design

    Tech

    • React

    Features

    • Code examples
    • Accessibility issues
    • Open source

  • Spinner

    Atlassian Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Accessibility

  • Loader

    Auro

    Tech

    • Web Components
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Spinner

    Backpack

    Tech

    • Mobile
    • React

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Tone of voice

  • Spinner

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Spinner

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Spinner

    Bootstrap

    Tech

    • Sass

    Features

    • Code examples
    • Accessibility
    • Open source

  • Inline loading

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Loading

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Loader

    Cauldron

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • LoaderOverlay

    Cauldron

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Spinner

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Progress Circle

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Spinner

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Loading

    Coral

    Tech

    • React

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Spinner

    Crayons

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Loader

    Decathlon Design System

    Tech

    • CSS
    • React
    • Svelte
    • Vue
    • Web Components

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Loading indicator

    Dell Design System

    Tech

    • Vanilla JS

    Features

    • Code examples
    • Usage guidelines

  • Spinner

    Duet Design System

    Tech

    • Angular
    • Vue
    • React

    Features

    • Code examples

  • Loading

    Elastic UI framework

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Open source

  • Loader

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • LoadingSpinner

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • Spinner

    Evergreen

    Tech

    • React

    Features

    • Open source

  • Spinner

    Flowbite

    Tech

    • Tailwind CSS

    Features

    • Open source
    • Code examples

  • Spinner

    Fluent UI

    Tech

    • React
    • Web Components
    • Mobile

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Spinner

    Forma 36

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Loading dots

    Geist Design System

    Tech

    • React

    Features

    • Code examples

  • Spinner

    Geist Design System

    Tech

    • React

    Features

    • Code examples

  • Spinner

    Gestalt

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Open source
    • Usage guidelines

  • Loading icon

    giffgaff design system

  • Circular progress

    HeroUI

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Spinner

    HeroUI

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Spinner

    Instructure-UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Accessibility
    • Open source

  • Loader

    Jøkul Designsystem

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Spinner

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Spinner

    Momentum Design

    Tech

    • React
    • Web Components

    Features

    • Usage guidelines
    • Open source

  • Loader

    Morningstar Product System

    Tech

    • Vue

    Features

    • Usage guidelines

  • Loader

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Progress indicator

    NewsKit

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Spinner

    Nord Design System

    Tech

    • Web Components

    Features

    • Code examples
    • Usage guidelines

  • Loading

    Orbit

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Tone of voice

  • Spinner

    Pajamas

    Tech

    • Vue

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Spinner

    Paste

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Code examples
    • Tone of voice
    • Accessibility
    • Open source

  • Spinner

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Loading spinner

    Pharos

    Tech

    • Web Components
    • Sass

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Accessibility
    • Tone of voice

  • Spinner

    Polaris

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

  • Spinner

    Porsche Design System

    Tech

    • Web Components
    • Angular
    • React
    • Vue

    Features

    • Code examples
    • Open source

  • Spinner

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Circular Progress

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Spinner

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Splash Animation

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Progress Radial

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Spinner

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Loader

    Seeds

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice

  • Loader

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Spinner

    Shoelace

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Progress circle

    Spectrum

    Tech

    • CSS
    • Web Components
    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Spinner

    Stacks

    Tech

    • Stimulus

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Loader dots

    Thumbprint

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Open source

  • Loader

    uStyle

    Tech

    • Sass

    Features

    • Tone of voice
    • Code examples
    • Usage guidelines
    • Open source
    • Unmaintained

  • Spinner

    Wanda

    Tech

    • React
    • CSS Modules

    Features

    • Code examples
    • Open source

  • Loader

    West Midlands Network Design System

    Tech

    • HTML
    • Nunjucks
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Loading Animation

    Workday Canvas Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

Related components

  • Progress bar

    Progress

    A horizontal bar indicating the current completion status of a long-running task, usually updated continuously as the task progresses, instead of in discrete steps.

Resources

Name distribution