https://github.com/small-tech/spinners
Two indeterminate progress spinners, one with lines and the other with dots (available in animated SVG, animated PNG, JavaScript, and Svelte).
https://github.com/small-tech/spinners
Last synced: about 1 month ago
JSON representation
Two indeterminate progress spinners, one with lines and the other with dots (available in animated SVG, animated PNG, JavaScript, and Svelte).
- Host: GitHub
- URL: https://github.com/small-tech/spinners
- Owner: small-tech
- License: other
- Created: 2021-06-30T19:03:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-06T10:23:58.000Z (almost 4 years ago)
- Last Synced: 2025-03-05T07:43:56.130Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 860 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Spinners
This package has two indeterminate progress spinners, one with lines:
…and the other with dots:
They are [two of the spinners](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate) from [Ionic Framework](https://ionicframework.com/docs/api/spinner).
## Why?
Because sometimes you just need a simple spinner without a 5-tonne framework attached.
## Usage
### Note on accessibility
When including a spinner in your site or app, the element that contains your spinner should be set as an [ARIA live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) and provide meaningful, app-specific feedback on its current state.
__Learn more:__ [“It’s alive!”: Apps That Feed Back Accessibly](https://www.smashingmagazine.com/2015/04/its-alive-apps-that-feed-back-accessibly/), [More Accessible Skeletons](https://adrianroselli.com/2020/11/more-accessible-skeletons.html)
### Just the SVGs
If you just want the SVGs, you can grab them below (right click and save):
- [Lines](https://raw.githubusercontent.com/small-tech/spinners/main/lines.svg)
- [Dots](https://raw.githubusercontent.com/small-tech/spinners/main/dots.svg)
SVG code (copy and paste)
#### Lines:
```svg
```
#### Dots:
```svg
```
### Plain old JavaScript
You can also use the spinners via plain old JavaScript:
1. `require()` or `import()` the spinner you want in your project.
2. Instantiate the class and pass it an options object that contains the DOM element that you want the class to bind to any properties you want to include. Valid properties are:
- `size`: the size of the spinner (height; width is auto-calculated). Default: `1em`. You can use any CSS sizing unit.
- `colour`: the colour of the spinner (default: uses the colour of the surrounding context). You can use any valid CSS colour value.
- `show`: a boolean indicating whether the spinner is visible. Default: `true`.
#### Example (JavaScript)
```html
import { Lines } from 'https://unpkg.com/@small-tech/[email protected]/dist/index.mjs'
const lines = new Lines({
target: document.getElementById('spinner'),
props: {
size: '2em',
colour: 'SlateGrey'
}
})
```
You can find a version of this example in the [examples/javascript](examples/javascript) folder.
### Svelte
Finally, you can also use the spinners in your [Svelte](https://dev.svelte) projects.
The example below is functionally identical to the plain old JavaScript one, above.
```svelte
import { Lines } from '@small-tech/spinners'
```
You can find a version of this example in the [examples/svelte](examples/svelte) folder.
### Generate PNGs
In an ideal world, animated SVGs (yes, even those that use [SMIL animations](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) – which are great, by the way) should be supported everywhere. Sadly, we don’t live in an ideal world. We live in a world where GitHub can mass-violate the copyright of free and open source projects implement “AI pair programming” but cannot render a simple animated SVG properly.
So, if you’re viewing this readme on GitHub, what you’re seeing above are bitmap versions (animated PNGs) of the spinners exported [using tiny scripts](/png) I wrote for that purpose. The reason they’re a shade of blue is because, unlike the SVGs which default to using the `currentColor` of their context, I had to export [a colour that would work with acceptable contrast on both light and dark mode](https://web.archive.org/web/20160214165231/trace.wisc.edu/contrast-ratio-examples/PassingMidColorSamples_4-5to1.htm).
They’re embedded as fallbacks within `` tags inside of the inline SVGs in the readme (so, for example, if you’re viewing them in [VSCodium](https://vscodium.com/), you will only see the SVG spinners, not two sets of spinners).
You can also use these scripts to generate your own animated PNG versions of the spinners, should you so desire.
First, clone this repository. Then, install the dependencies:
```shell
cd png
npm install
cd ..
```
And run the scripts:
```shell
node png/lines
node png/dots
```
You can customise the size, colour, and frame multiplier (animation resolution) via options.
To see all options:
```shell
node png/lines --help
node png/dots --help
```
If you’re interested in the nitty gritties of image manipulation, view the source of the [lines.js](png/lines.js) and [dots.js](png/dots.js) scripts to see an example of how to convert SVGs to animated PNGs in Node.js using the [svg-png-converter]() and [node-apng]() modules.
_(Yes, I know I should refactor the redundancies between those two scripts. No, I don’t have the time to do that now. And yes, I’ve already spent far more time than on this than any reasonable person should have.)_
## Like this? Fund us!
[Small Technology Foundation](https://small-tech.org) is a tiny, independent not-for-profit.
We exist in part thanks to patronage by people like you. If you share [our vision](https://small-tech.org/about/#small-technology) and want to support our work, please [become a patron or donate to us](https://small-tech.org/fund-us) today and help us continue to exist.
## License
[ISC](./license) ([Ionic Framework’s spinners are under MIT](./license))