css-spinners

WebJar for css-spinners

License	MIT
GroupId	org.webjars.bower
ArtifactId	css-spinners
Last Version	2.2.0
Release Date	Oct 9, 2015
Type	jar
Description	css-spinners WebJar for css-spinners
Project URL	http://webjars.org
Source Code Management	https://github.com/jlong/css-spinners

Download css-spinners

Filename	Size
css-spinners-2.2.0.pom
css-spinners-2.2.0.jar	52 KB
css-spinners-2.2.0-sources.jar	22 bytes
css-spinners-2.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/css-spinners/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>css-spinners</artifactId>
    <version>2.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/css-spinners/
implementation 'org.webjars.bower:css-spinners:2.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/css-spinners/
implementation ("org.webjars.bower:css-spinners:2.2.0")

Apache Buildr

'org.webjars.bower:css-spinners:jar:2.2.0'

Apache Ivy

<dependency org="org.webjars.bower" name="css-spinners" rev="2.2.0">
  <artifact name="css-spinners" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='css-spinners', version='2.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "css-spinners" % "2.2.0"

Leiningen

[org.webjars.bower/css-spinners "2.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

CSS Spinners

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

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.
.spinning-pixels-loader	A spinning pixelated loader.

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.

Adaptations

React components by Adam Wanninger

Versions

Version
2.2.0 Oct 9, 2015