Unicode Spinners Pro · loaders made of text · v1.0

1. 1

   Upload unicode-spinners.min.js from the download to your site.

2. 2

   Add the script once, then the tags wherever you need a loader.

3. 3

   Call done() or fail() when the work finishes.

<script src="/js/unicode-spinners.min.js" defer></script>

<pf-spinner name="shimmer" label="Thinking…" shimmer-label></pf-spinner>
<pf-progress value="42" label="Uploading" eta></pf-progress>

<script>
  document.querySelector("pf-spinner").done("Answer ready")
</script>

1. 1

   Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (nothing to host).

2. 2

   Add an Embed element with the tag below where the loader goes.

3. 3

   Publish. Custom code runs on the published site.

<pf-spinner name="orbit" label="Loading"></pf-spinner>

Custom code needs a paid Webflow site plan.

1. 1

   Upload unicode-spinners.min.js to your theme folder (or with a file manager plugin) and copy the URL.

2. 2

   Add a Custom HTML block with the script and the tag.

<script src="https://your-site.com/wp-content/themes/your-theme/js/unicode-spinners.min.js" defer></script>
<pf-spinner name="scan" label="Loading posts"></pf-spinner>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload unicode-spinners.min.js.

2. 2

   Add a Custom Liquid section with the script and the tag.

<script src="{{ 'unicode-spinners.min.js' | asset_url }}" defer></script>
<pf-spinner name="dna" label="Checking stock"></pf-spinner>

1. 1

   Copy react/UnicodeSpinners.tsx into your project. It needs only React 18+.

2. 2

   Use the components, or the hook for your own markup.

import { Spinner, Progress, AgentSteps, useSpinner } from "./UnicodeSpinners"

<Spinner name="shimmer" label="Thinking…" shimmerLabel />
<Progress value={percent} label="Uploading" eta />
<AgentSteps steps={[{ label: "Search", state: "done" }, { label: "Write", state: "running" }]} />

const frame = useSpinner("orbit") // "⠃", then "⠉"...

Next.js: the server renders a still frame and the label; the animation starts in the browser.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it UnicodeSpinner.

2. 2

   Replace the file's contents with framer/UnicodeSpinner.tsx from the download, and save.

3. 3

   Drag it onto the canvas, then pick Spinner or Progress Bar, the spinner, a label, colors and a font.

On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to watch it there.