Unicode Spinner — 150 Animated Loaders in One Component
A single, lightweight Framer component packed with 150 unique loading animations — from minimal braille dot patterns to playful emoji sequences. No images, no SVGs, no external dependencies. Just pure Unicode characters, endlessly customizable.
What's Inside
150 animations sourced from open-source spinner libraries and original custom designs, split into two types:
68 Braille pattern animations — grid-decodable dot patterns like orbit, helix, cascade, breathe, DNA, scan, rain, snake, heartbeat, spiral, vortex, pendulum, zigzag, pyramid, tetris, ripple, and more. These can be rendered as raw braille characters or decoded into any shape you choose. Multi-line braille patterns are also supported.
82 Character animations — arrows, clocks, moons, bouncing balls, progress bars, emoji sequences, toggles, gradient sweeps, and other creative Unicode spinners.
Features
Shape Decoder — Braille animations can be rendered as 10 different symbol styles: dots, blocks, squares, circles, diamonds, triangles, stars, hearts, arrows, or crosses. Same animation pattern, completely different look. You can also type in any custom symbol or emoji as the on/off character. Smart grid cropping automatically trims empty rows and columns so every pattern fits tightly.
Gradient — Apply a linear gradient to the spinner with full control over start color, end color, and angle. The label stays solid — clean separation.
Glow — Add a soft bloom effect to the spinner with independent color, intensity, blur, and spread controls. Works beautifully on dark backgrounds.
Label with Shimmer — Fully customizable text label with Framer's native font picker (family, weight, size, line-height, letter-spacing), independent color, and a built-in shimmer sweep effect. The shimmer has its own color, speed, direction, rotation angle, and delay. The label also supports animated trailing dots — when your text ends with "...", the dots animate sequentially for a classic loading effect.
Label Position — Place the label to the left, right, above, or below the spinner with a single segmented control.
Duration Modes — Run the animation forever (Loop) or for a set number of seconds (Time). In Time mode, a Finisher appears — a braille checkmark pattern that transitions in smoothly when the timer ends. The finisher has its own opacity, color, and transition style (ease, linear, spring, slow, snap).
Custom Symbols — For braille animations in shape mode, override the on and off symbols with anything you want. Fire emoji as active dots, hollow circles as inactive. Show or hide the off-state dots with adjustable opacity.
Dot Gap — Fine-tune the spacing between dots in shape grid mode. Tighten for a dense matrix, spread for an airy pattern.
Property Panel
Everything is organized into clean, collapsible groups:
Animation — pick from 150 spinners (tagged ⠿ for braille, ✦ for char)
Shape — choose how braille animations render (auto-hides for char animations)
Size — unified size control for both braille and shape modes
Interval — frame timing in milliseconds
Color — base spinner color
Gradient — enable/disable, from, to, angle
Glow — enable/disable, color, intensity, blur, spread
Duration — loop or timed with seconds control
Finisher — checkmark after timed duration with transition options
Custom — override symbols for shape mode
Show Label — toggle label visibility
Position — left, right, top, bottom
Label — text, full font control, color, animate dots, dot speed, and shimmer nested inside
Gap — spacing between spinner and label
Dot Gap — spacing between dots in shape grid
Why This Component
It's built on raw Unicode character data, which means it renders instantly, scales to any size, respects your color system, and works everywhere Framer renders.
Perfect for loading states, AI thinking indicators, status feedback, onboarding sequences, or anywhere you need subtle animated detail.
irfan aziz
