Are these spinners free to use?

Yes. The 18 spinners are the frame data of the unicode-animations npm package, which is MIT-licensed (© Gunnar Gray). You can use them in personal and commercial projects. Keep the license notice if you copy the package itself.

Can I use the code this tool generates?

Yes. The HTML, JavaScript, terminal snippet and JSON are free to use in any project, with no attribution needed for the snippets. Nothing is uploaded; it all runs in your browser.

Why don't the spinners show in my terminal or font?

Braille characters (U+2800 to U+28FF) need a font that has them. Most modern terminals and system monospace fonts do, and browsers fall back to one automatically. If you see empty boxes, pick a font with braille support, such as a current Nerd Font, DejaVu Sans Mono or Menlo.

Do the spinners respect reduced motion?

The page does, and so does the HTML snippet: if the visitor has asked for reduced motion it leaves a still frame on screen and does not start the timer. For a terminal there is no such setting, so check your own flags (for example a non-TTY or CI environment) and print a static line instead.

What does Unicode Spinners Pro add?

This tool covers the 18 free spinners as frames plus a loop to paste. Unicode Spinners Pro is a paid pack with more spinners, AI and streaming loaders, progress bars and finished components for script tags, React and Framer.

Free tools / Unicode spinner

Free unicode spinner generator

Pick a braille loading spinner, tune the speed, label and colors, then copy the HTML + JavaScript, a Node terminal snippet or the raw frames. Text only, no sign-up.

braille · 10 frames · 80ms per frame

All 18 free spinners

Spinner

Speed

100%

Label text

Font size

48px

Text color

Background

Colors

HTML + JavaScript

<!-- braille: 10 frames, 80ms each (unicode-animations, MIT) -->
<span class="spin" role="status">
  <span class="spin-frame" aria-hidden="true">⠹</span>
  <span class="spin-label">Loading</span>
</span>

<style>
  .spin { display: inline-flex; align-items: center; gap: 0.5em; font-size: 48px; color: #f6f6f5; }
  /* Fixed width, so the text next to it never moves. */
  .spin-frame {
    display: inline-block;
    width: 1ch;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
  }
  .spin-label { font-size: 0.4em; }
</style>

<script>
  (function () {
    var frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
    var el = document.querySelector(".spin-frame");
    // Reduced motion: leave a still frame on screen and do not animate.
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    var i = 0;
    setInterval(function () {
      i = (i + 1) % frames.length;
      el.textContent = frames[i];
    }, 80);
  })();
</script>

Node / terminal

// braille: 10 frames, 80ms each
const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
let i = 0;

process.stdout.write("\x1b[?25l"); // hide the cursor
const timer = setInterval(() => {
  i = (i + 1) % frames.length;
  process.stdout.write("\r" + frames[i] + " " + "Loading");
}, 80);

// When the work is done:
setTimeout(() => {
  clearInterval(timer);
  process.stdout.write("\r\x1b[K" + "Done\n\x1b[?25h");
}, 3000);

Frames (JSON)

{
  "name": "braille",
  "interval": 80,
  "frames": [
    "⠋",
    "⠙",
    "⠹",
    "⠸",
    "⠼",
    "⠴",
    "⠦",
    "⠧",
    "⠇",
    "⠏"
  ]
}

Using the npm package

npm i unicode-animations

import { spinners } from "unicode-animations";

const { frames } = spinners.braille;
let i = 0;
setInterval(() => {
  process.stdout.write("\r" + frames[i++ % frames.length] + " " + "Loading");
}, 80); // published interval: 80ms

The 18 spinners are the frame data of the free unicode-animations npm package (MIT License, © Gunnar Gray). The HTML snippet shows a still frame and does not animate for visitors who prefer reduced motion.

What is a unicode or braille spinner?

It is a loading animation made of text. Each frame is a short string, usually of braille characters such as ⠋⠙⠹⠸, and showing the frames one after another in the same place makes a dot appear to travel, pulse or spin. Command-line tools use them for exactly this: a single line that gets redrawn while a task runs.

Why text beats a GIF or SVG here

A text spinner inherits the font size and color of the sentence around it, so it can sit inline in a button, a table cell or a status line. It is a few hundred bytes with no image request, stays sharp at any size, and works in a terminal, where an image cannot go at all.

Layout shift and accessibility

Frames can differ in width, which makes surrounding text jitter. The snippets here set a fixed ch width on a monospace span, so nothing moves. Screen readers would otherwise read out every frame, so the spinner span is aria-hidden and a separate label carries role="status". The HTML snippet also skips the timer when prefers-reduced-motion is set and leaves a still frame showing.

How to use the output

Plain HTML: paste the HTML + JavaScript block where the spinner should appear. It has no dependencies.
React: keep the frames array outside the component and run setInterval in a useEffect that updates an index in state, returning () => clearInterval(id) as the cleanup. Render frames[i] in a fixed-width span. React effects.
Node CLIs: use the terminal snippet. It writes \r to return to the start of the line and redraw, and hides the cursor while it runs. Or install the package: npm i unicode-animations.
Webflow and Framer: put the HTML + JavaScript block in an Embed element (Webflow) or an Embed / custom code snippet (Framer) at the spot where it should show. Webflow effects, Framer effects.

Want these as drop-in components with progress bars and AI loaders? See Unicode Spinners Pro, or browse all web effects.

Frequently asked questions

Are these spinners free to use?: Yes. The 18 spinners are the frame data of the unicode-animations npm package, which is MIT-licensed (© Gunnar Gray). You can use them in personal and commercial projects. Keep the license notice if you copy the package itself.
Can I use the code this tool generates?: Yes. The HTML, JavaScript, terminal snippet and JSON are free to use in any project, with no attribution needed for the snippets. Nothing is uploaded; it all runs in your browser.
Why don't the spinners show in my terminal or font?: Braille characters (U+2800 to U+28FF) need a font that has them. Most modern terminals and system monospace fonts do, and browsers fall back to one automatically. If you see empty boxes, pick a font with braille support, such as a current Nerd Font, DejaVu Sans Mono or Menlo.
Do the spinners respect reduced motion?: The page does, and so does the HTML snippet: if the visitor has asked for reduced motion it leaves a still frame on screen and does not start the timer. For a terminal there is no such setting, so check your own flags (for example a non-TTY or CI environment) and print a static line instead.
What does Unicode Spinners Pro add?: This tool covers the 18 free spinners as frames plus a loop to paste. Unicode Spinners Pro is a paid pack with more spinners, AI and streaming loaders, progress bars and finished components for script tags, React and Framer.