Spun-out with Spinner Images?

• Customizable
• No Dependencies or Frameworks
• Compatible with standard HTML, css, and Javascript
• Works in all modern browsers
• May be entirely controlled in markup, or by script, or in combination

Quick Start:

1. Get the script spinnerComponent.js (see Sources, below)
2. Place it where your scripts are, e.g., in a ./scripts directory
3. In your HTML, load the script: <script src="./scripts/spinnerComponent.js"></script>
4. Place a spinner where you want it
5. Default: <x-spinner></x-spinner>
6. Fast Dotted Green:
   <x-spinner rstyle="dotted" sp=".5" color="green"></x-spinner>

See Rotor Styles, below, for an organized view of variations.
See the README file in the Sources download for extensive instructions and documentation.

Motivation

I'm fed up with the limitations of using animated images for "wait spinners". Now I've made a customizable spinner, the SpinnerElement, that works without images in any HTML layout.

Good web interface design shows what's happening. A long background process calls for some kind of indicator, especially if no other action is possible on the page until that process completes (or bails out). The most common indicators are progress bars and wait spinners. Here I'm focused on a better option for wait spinners.

I need ways let my clients know their data-oriented sites are busy, not dead. For convenience, I've settled for a few generic animated GIFs that I bet you've seen. The alternative is designing a new one, or searching through millions of spinner images online. But that's not the whole task...

What if the client has a color scheme the spinner should fit into? Or a typeface whose light weight makes the generic spinner look too bulky? Sizing someone's nice downloaded spinner image to fit its spot in the layout also takes time and attention, especially if it's in a line of text.

Introducing the HTML SpinnerElement
The SpinnerElement is constructed automatically within your HTML when your page loads the Javascript spinnerComponent.js.

Yes, Javascript. Why is loading a Javascript-based spinner better than including an image file?

• Versatility via familiar HTML tag attribute assignments;
• Programmability - if you want it;
• Works like a text character in HTML layouts;
• Takes the size and color of its surroundings - unless you specify otherwise;
• Include text or another HTML element as prefix and/or suffix;
• No visual degradation at any scale;
• Can be tuned to specifications in your style book or branding guide;
• Focus on what you want, not where to download it or how to make it.

Spinners do not rely on Javascript to run. When spinnerComponent.js loads, it executes once to construct the SpinnerElement class and attach it to the HTML document. When a spinner is rendered in markup, its internal css provides its format and rotation. spinnerComponent.js also provides an optional programming interface whose methods momentarily execute only when adding or modifying spinners.

Spinners follow ARIA accessibility guidelines. The rotors themselves are invisible to screen readers, because they have no content to read. Any included prefixes and suffixes will be seen and read. The spinner may also be marked as a "live" area by assigning it the attribute aria-wrap="true"; it will then assume the role of communicating changes in status, such as when a long-running process completes.

The SpinnerElement is self-contained. Spinners have no side-effects on the rest of the layout, and multiple spinners in the same layout have no effect on each other. Being encapsulated also keeps the SpinnerElement compatible with other web app resources, scripts, modules, and frameworks. Creation of the SpinnerElement utilizes HTML, css, and Javascript capabilities that are standardized and broadly adopted by web browsers.

Loading cost and time for spinnerComponent.js is minimal, with a file size less than 20k.

Some Examples

Recording in Progress

Spin It   Pause      

Pace Me

Rotor Styles

All of the spinners above use the same basic spinner, with font-size flexing from 2em to 3em set in the page's style sheet, with the rotor color green inherited from the containing <div>, and the spinner's own markup specifying the light blue trace color. The table shows how the spinner varies with different rotor types and weights, and the buttons above change the rotor style for the whole set of spinners, which are identified in the HTML markup by the class "demoSpnr".

Here is the spinner markup for one of the spinners above: <div style="color:green;"> <x-spinner class="demoSpnr" rtr="101" wt=".195" tclr="rgba(0,55,255,.25)"></x-spinner> </div> yielding: , which still has the class "demoSpnr" so it has the size of the spinners above, and it will change rotor style when you click the buttons above.

Here is one of the buttons that sets the style of the rotors assigned the "demoSpnr" class, using one of the spinner's built-in methods: <button type="button" onclick=" const targetSpinners = document.querySelectorAll('.demoSpnr'); targetSpinners.forEach(spinner => { spinner.setRotor('dotted'); }); ">Dotted</button>

How is this spinner made?

These images illustrate how the rotor - the spinning part - is made from a square box HTML element with a border. One or more of the top, right, bottom, and left, borders are colored differently from the rest. Then the sides of the square are made round by giving the corners of the square a radius of 50% of its size. The result is four "quadrants" of the spinner to color and format for different spinners.

The faint background of the borders is called the trace. It may also be any color, or transparent so it doesn't show at all.

The spinning motion of the rotor is accomplished with the spinner's built-in css animation, rotating the (rounded) square 360° in the number of seconds specified with speed="[#]", rotating clockwise or counter-clockwise as specified with direction="[ cw | ccw ]".

You Can Make Your Own Base Spinner
With Customized Defaults!

The defaults for spinners may be customized, baking in your preferred attributes so it's not necessary to provide them in markup. Unless you specify otherwise, they will still assume the color and size of the text they're embedded in, like a text character .

Here is the standard spinner → , marked up with no added attributes as <x-spinner></x-spinner>

This page includes a script that uses the createSpinnerElement constructor provided by spinnerComponent.js to create a second spinner with a faster default speed and reverse direction: <script> createSpinnerElement('x-fast-revspinner', { speed: '.5', dir: 'ccw'}); </script>

Here is the second spinner → , marked up with no added attributes as <x-fast-revspinner></x-fast-revspinner>

A few of the spinners in the big table above are this type. Do you see them?

This page has another script to create a third "proprietary" spinner for the Acme company: <script> createSpinnerElement('acme-spnr-06', { sp: '.33', wt: '6', rtr: '101', dir: 'cw' }); </script>

The third spinner comes out like → , marked up with no added attributes as <acme-spnr-06></acme-spnr-06>

Naming custom spinners:

• the name must contain a hyphen ('-');
• the name must avoid standard reserved words in HTML;
• the name should be all lower case;
• the name is recommended to start with the `x-` prefix.

Note that the above scripts using `createSpinnerElement` add new spinner elements to the DOM; the original spinner with the tag name 'x-spinner' is still available.

Special Case: A Workaround for List Bullets

• Customizable
• No Dependencies or Frameworks
• Compatible with standard HTML, css, and Javascript
• Works in all modern browsers
• May be entirely controlled in markup, or by script, or in combination

HTML list elements do not accept custom web components as bullet markers. Instead, the spinning bullets on the list above are provided by removing the list's own item markers by styling them list-style: none;, and then inserting the custom spinner elements at the very start of each list item, just before its content. The insertion is accomplished with a brief script triggered after full DOM load to ensure the list is all there. <script> document.addEventListener('DOMContentLoaded', function() { const listItems = document.querySelectorAll('.spin1 li'); const spinOpts = { rtr: '101', color: 'red', bgclr: 'gold', tclr: 'blue' }; listItems.forEach(function(item) { const spinner = new SpinnerElement( spinOpts ); item.insertAdjacentElement('afterbegin', spinner); }) }); </script>

Sources

Enabling the HTML SpinnerElement is as simple as adding the script spinnerComponent.js to your website and loading it as the "src" of an HTML <script> element: <script src="./scripts/spinnerComponent.js"></script>

The best source for the latest production release of spinnerComponent.js is from my account at GitHub.com. That release comes with a README file with documentation and also a copy of this page's HTML file you can inspect for examples.