jlong/css-spinners


Simple CSS spinners and throbbers made with CSS and minimal HTML markup.

http://codepen.io/Iulius90/pen/RaeWmY

Host: GitHub

License: MIT

Language: CSS


CSS Spinners

Simple CSS loading indicators made with CSS and minimal HTML markup.

screenshot

All loading indicators are designed to be used with minimal markup:

<div class="loading-indicator">
    Loading...
</div>

Simply replace "loading-indicator" with the class name of your choice.

Markup

To use a specific loading indicator link the appropriate file:

<link rel="stylesheet" href="css/spinner/throbber.css">

Or, if you'd like to have access to the entire library of spinners you can link the root file:

<link rel="stylesheet" href="css/spinners.css">

Then apply the appropriate class name for the spinner of your choice to the markup:

<div class="throbber-loader">
    Loading...
</div>

Class names

The full list of loading indicator class names are shown below. To see them in action, visit http://css-spinners.com/.

Class Description
.spinner-loader Spinning circles.
.throbber-loader Animated Facebook-like throbber.
.refreshing-loader Circular spinning arrow. Great for refreshing content.
.heartbeat-loader Animated beating heart.
.gauge-loader Animated speedometer-like gauge with rotating needle.
.three-quarters-loader Minimal three-quarters donut spinner.
.wobblebar-loader Animated wobbling progress bar.
.atebits-loader Staight out of Letterpress, an animated rotating Atebits logo.
.whirly-loader A comet-like rotating spinner.
.flower-loader An animated spinning flower.
.dots-loader Almost a rotating shell game. With dots!
.circles-loader Three rotating multi-colored circles.
.plus-loader Animated Google Plus-like loader.
.ball-loader A bouncing ball.
.hexdots-loader Similar to the dots animation, but with six!
.inner-circles-loader A filling circle with other circles
.pong-loader Retro tennis-like game simulation from the 70s.
.pulse-loader A pulsing circle. Shrinking and enlarging.

Customize with Sass

Many of the spinners in this collection can be customized by tweaking variables included in the Sass source files.

Install with Bower

You can install CSS Spinners with the following command, like any other Bower project:

$ bower install css-spinners

CSS is available in the css/ directory and Sass in the sass/ directory.

Contributions

Contributions are welcome! See CONTRIBUTING.md for details.

License

CSS Spinners is freely available under the MIT License. See LICENSE file for details.

Project Statistics

Sourcerank 9
Repository Size 539 KB
Stars 778
Forks 125
Watchers 34
Open issues 10
Dependencies 2
Contributors 7
Tags 9
Created
Last updated
Last pushed

Top Contributors See all

John W. Long Scott Michaud cotne nazarashvili Julia Elman Vangelis Tzortzis Apostolis Taxidaridis Tom Hazledine

Packages Referencing this Repo

@chgibb/css-spinners
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
Latest release 2.2.1 - Updated - 778 stars
css-spinners
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
Latest release v2.2.0 - Published - 778 stars
css-spinners
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
Latest release 2.2.0 - Published - 778 stars

Recent Tags See all

v2.2.0 September 13, 2015
v2.1.0 June 23, 2015
v2.0.2 May 15, 2015
v2.0.1 May 14, 2015
v2.0.0 May 13, 2015
v1.0.3 March 11, 2015
v1.0.2 June 10, 2014
v1.0.1 October 03, 2013
v1.0.0 October 03, 2013

Interesting Forks See all

srekoble/css-spinners
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
CSS - Last pushed - 2 stars
amitabhaghosh197/css-spinners
Simple CSS spinners and throbbers
CSS - MIT - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2016-11-24 13:30:17 UTC

Login to resync this repository