pack-of-spinners v1.0.0-beta.1

pack-of-spinners

A pack of most used pure css spinners with configurable sizes and color.

Inspired from SpinKit and Load Awesome. Some of the spinners present here are modified variants of those in the above projects.

Why I created pack-of-spinners

While the above projects give you fantastic spinners, you may have to use the pre-defined sizes or customize the css yourself, which will include changing the sizes and respective animations. If you use the same spinner with variable sizes, you may have to specify multiple css declarations.

Here you can specify the height, width and color of the outer element and the spinner adjusts automatically.

This is ideal if you use frameworks or libraries like react, vue, ember or svelte. You can just create a common spinner component using this.

Usage

CSS

Use the CSS and HTML from the examples directly, or use npm to add pack-of-spinners to your project.

$ npm install pack-of-spinners

SCSS

If you are using SCSS, you can include the specific SCSS files from the scss sub folder corresponding to the spinners you want to use. Grab the HTML from the examples.

Importing CSS or SCSS from npm

The syntax for importing css/scss from node_modules varies based on the module bundler and other preprocessors you use. For rollup, you can use postCSS plugin to specify how to import the files. For webpack,

@import './../node_modules/pack-of-spinners/css/circles-pulse.css'

@import '~pack-of-spinners/scss/circles-spin.scss'

However, it is much cleaner to just copy the required css into your own project's css files.

Svelte component

Svelte users can just use the svelte component from pack-of-spinners-svelte.

Other frameworks

You are free to develop a pack-of-spinners component for any other framework of your choice. Just update the README here and give a pull request.

Browser support

All modern browsers. IE support starts from IE 10+. Tested in Chrome, Firefox, Opera, IE, Edge.