18 braille-based Unicode spinner animations for Angular. Zero runtime dependencies.
<ngx-unicode-spinners name="braille" /># npm
npm install ngx-unicode-spinners
# pnpm
pnpm add ngx-unicode-spinnersRequires Angular 21+.
Import SpinnerComponent in your standalone component or NgModule:
import { SpinnerComponent } from 'ngx-unicode-spinners';
@Component({
imports: [SpinnerComponent],
template: `<ngx-unicode-spinners name="orbit" color="#6ee7b7" fontSize="1.5rem" />`,
})
export class MyComponent {}| Input | Type | Default | Description |
|---|---|---|---|
name |
SpinnerName |
required | Spinner to display (see list below) |
interval |
number |
per-spinner | Frame interval in ms |
color |
string |
inherited | CSS color value |
fontSize |
string |
inherited | CSS font-size value |
playing |
boolean |
true |
Start/stop animation |
ariaLabel |
string |
— | Accessible label. If omitted, spinner is hidden from assistive technology. |
| Name | Name | Name |
|---|---|---|
braille |
rain |
orbit |
braillewave |
scanline |
breathe |
dna |
pulse |
waverows |
scan |
snake |
checkerboard |
sparkle |
cascade |
helix |
columns |
fillsweep |
diagswipe |
List all names at runtime:
import { SPINNER_NAMES } from 'ngx-unicode-spinners';
console.log(SPINNER_NAMES); // readonly SpinnerName[]By default the spinner is decorative (aria-hidden="true"). Pass ariaLabel to make it announced:
<ngx-unicode-spinners name="braille" ariaLabel="Loading results" />This sets aria-label on the host and adds an aria-live="polite" sr-only span inside.
makeGrid and gridToBraille are exported for building your own frame sequences. Each braille character encodes a 4-row × 2-column dot grid.
import { makeGrid, gridToBraille } from 'ngx-unicode-spinners';
// Create a 4×8 grid (= 4 braille chars wide)
const grid = makeGrid(4, 8);
// Light up some dots
grid[0][0] = true;
grid[3][7] = true;
const frame = gridToBraille(grid); // single string of braille charsOr use UnicodeSpinnersService if you prefer injection:
import { UnicodeSpinnersService } from 'ngx-unicode-spinners';
@Injectable({ providedIn: 'root' })
export class MyService {
constructor(private spinners: UnicodeSpinnersService) {
const grid = this.spinners.makeGrid(4, 4);
const frame = this.spinners.gridToBraille(grid);
}
}npm start # Demo app at http://localhost:4200
npm run build # Build library to dist/ngx-unicode-spinners/
npm test # Run tests with VitestMIT