Spinners

Installing Spinners

Spinners can be installed as a Ruby Gem, NPM module, via Bower, or simply via download.

Ruby Gem

To install, simply run:

$ gem install spinners

Then require spinners in your projects config.rb:

require 'spinners'

Alernatively, when using Bundler and/or Rails, include spinners in your Gemfile:

gem 'spinners'

and run bundle install.

The Spinners gem will be installed as a Compass extension if you have Compass on your system.

If you're using Grunt or Gulp with grunt-contrib-sass, grunt-contrib-compass, or gulp-compass without a config.rb file and have the Ruby Gem installed, you can add Spinners as a dependency to your configuration object.

compass: {  // or sass
 compile: {
   options: {
     require: 'spinners'
   }
  }
}

If you're using grunt-sass, which runs on libsass, you won't be able to use the ruby gem. Use Spinners with NPM, Bower, or install manually.

Installing with NPM

To install spinners with NPM run:

$ npm install --save-dev spinners

When installed via NPM, spinners supports eyeglass.

Installing Spinners with Bower

To install Spinners as a Bower component run:

$ bower install spinners

Installing Spinners Manually

Just clone the repo from github or download the latest release tarball. The only file you'll need is stylesheets/_spinners.scss. Place this in the appropriate sass folder of your project.

Using Spinners

Getting started

Import Spinners into your main .scss file or -module first. Then call the `spinner` mixin in a selector of your choice.

.my-spinner {
  @include spinner();
}

Customizing Spinners

Size, border-width, -style, -color, and the speed of the animation can be customized.

Adjusting Size

By default, Spinners are set to be 1em wide and high, so a spinner will size proportionally to its context. To customize its size, you may use any valid dimensional unit such as px, em, or rem:

.my-spinner {
  @include spinner(1.25em);
}

Adjusting border-width, -style, and -thickness

For adjusting the border, you may use any valid shorthand css border declaration or individual border-{property} {value} (no colon!) pairs:

.my-spinner {
  @include spinner(3px solid #ccc);
}
   
.my-spinner {
  @include spinner(border-width 3px, border-style solid);
}

Adjusting Animation Speed

To customize a spinner's animation speed, pass the number of seconds for one full rotation:

.my-spinner {
    @include spinner(.6s);
}

Adjusting Background

The background, i.e. the perceived non-rotating part of a spinner, is set to be transparent by default. To adjust the background, pass a color as background argument:

.my-spinner {
    @include spinner(background rgba(0, 0, 0, .2));
}

How Spinners handles Arguments

All arguments are optional. When using mulitple customizations, pass your arguments comma-separated:

.my-spinner {
    @include spinner(28px, 3px solid #555, .7s);
}

In case of invalid arguments compilation will not fail, but Spinners will output a warning and use its defaults.

Examples

.my-spinner {
 @include spinner();
}

.my-big-fat-spinner {
 @include spinner(2em, border-width 12px);
}

.my-background-spinner {
 @include spinner(background rgba(0, 0, 0, .2));
}

.my-orange-dotted-spinner {
 @include spinner(1.5em, 6px dotted orange);
}

.my-dashed-spinner {
 @include spinner(1.1em, border-style dashed);
}

.my-double-spinner {
 @include spinner(6px double fuchsia);
}

.my-fast-spinner {
 @include spinner(.3s, border-width 4px, border-color #aaa);
}

.my-slow-spinner {
 @include spinner(3s);
}

Top