angular-spinkit

WebJar for angular-spinkit

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-spinkit
Last Version	0.3.4
Release Date	Apr 30, 2016
Type	jar
Description	angular-spinkit WebJar for angular-spinkit
Project URL	http://webjars.org
Source Code Management	https://github.com/Urigo/angular-spinkit

Download angular-spinkit

Filename	Size
angular-spinkit-0.3.4.pom
angular-spinkit-0.3.4.jar	19 KB
angular-spinkit-0.3.4-sources.jar	22 bytes
angular-spinkit-0.3.4-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-spinkit/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-spinkit</artifactId>
    <version>0.3.4</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-spinkit/
implementation 'org.webjars.bower:angular-spinkit:0.3.4'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-spinkit/
implementation ("org.webjars.bower:angular-spinkit:0.3.4")

Apache Buildr

'org.webjars.bower:angular-spinkit:jar:0.3.4'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-spinkit" rev="0.3.4">
  <artifact name="angular-spinkit" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-spinkit', version='0.3.4')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-spinkit" % "0.3.4"

Leiningen

[org.webjars.bower/angular-spinkit "0.3.4"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[0,)

Project Modules

There are no modules declared in this project.

angular-spinkit

SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS

ng2-spin-kit - SpinKit spinners for AngularJS 2.x

https://github.com/WoltersKluwerPL/ng2-spin-kit

Usage

1. Install with bower:

bower install angular-spinkit --save

2. Add angular-spinkit.min.js and angular-spinkit.min.css to your main file (index.html)

<link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
<script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>

3. Set angular-spinkit as a dependency in your module

var myapp = angular.module('myapp', ['angular-spinkit'])

4. Add rotating-plane-spinner, double-bounce-spinner, wave-spinner, wandering-cubes-spinner, pulse-spinner, chasing-dots-spinner or circle-spinner directive to the wanted element, example:

<rotating-plane-spinner></rotating-plane-spinner>
<double-bounce-spinner></double-bounce-spinner>
<wave-spinner></wave-spinner>
<wandering-cubes-spinner></wandering-cubes-spinner>
<pulse-spinner></pulse-spinner>
<chasing-dots-spinner></chasing-dots-spinner>
<circle-spinner></circle-spinner>
<three-bounce-spinner></three-bounce-spinner>
<cube-grid-spinner></cube-grid-spinner>
<word-press-spinner></word-press-spinner>
<fading-circle-spinner></fading-circle-spinner>

5. If you want to show the spinner while an image is loading just use the 'spinkit-image-preloader' directive:

<!-- The directive tries to copy dimensions from inline styles and attributes to the spinner placeholder -->
<img width='800' height='600' alt='Your description' ng-src='http://example/img.jpg' spinkit-image-preloader='rotating-plane-spinner' />
<img style='width:800px; height:800px' alt='Your escription' ng-src='http://example/img.jpg' spinkit-image-preloader='rotating-plane-spinner' />

<!-- Also feel free to set width/height and other properties through CSS just configure your own css-class using the 'spinkit-image-preloader-class' attribute (or use css-class by default "spinner-wrapper") -->
<img alt='Your description' ng-src='http://example/img.jpg' spinkit-image-preloader='cube-grid-spinner' spinkit-image-preloader-class='rotating-plane-spinner' />

You can listen to the image loaded event.

// in controller
$scope.$on('angular-spinkit:imageLoaded');

6. Add all your requests and ideas in the issues area or send us a pull request!

Example

You can check out this live example here: http://jsfiddle.net/Urigo/638AA/18/

Versions

Version
0.3.4 Apr 30, 2016