<rough-spinner>

A custom element (web component) for making spinners with text.
Use it for loaders, marquee-like effects or something more fun!

Want to contribute? Have a sweet spinner to share?
Visit github.com/oskarrough/rough-spinner -→

How to use

Include this script on your page and use the element anywhere

<script src="https://cdn.jsdelivr.net/gh/oskarrough/rough-spinner/rough-spinner.js"></script>

Try editing the HTML!

Define your own spinners

Each character will be one frame in the animation.

<rough-spinner>123</rough-spinner>

<rough-spinner>Hello world</rough-spinner>

Control the interval (speed in milliseconds)

<rough-spinner interval="60"></rough-spinner>

or set the frames per second explicitly:

<rough-spinner fps="60"></rough-spinner>

Use one of fifteen pre-defined spinners!

<rough-spinner spinner="2"></rough-spinner>

If nothing else is defined, spinner 1 will be used.

Browser support

For browsers that don't yet support W3C custom elements, you'll want to include a polyfill called document-register-element as well. Include it before the rough-spinner.js script.