JarCasting
JarCasting JarCasting

ng-spin-kit

WebJar for ng-spin-kit

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

ng-spin-kit
Last Version

Last Version

5.1.1
Release Date

Release Date
Type

Type

jar
Description

Description

ng-spin-kit
WebJar for ng-spin-kit
Project URL

Project URL

http://webjars.org

Download ng-spin-kit

Filename Size
ng-spin-kit-5.1.1.pom
ng-spin-kit-5.1.1.jar 172 KB
ng-spin-kit-5.1.1-sources.jar 22 bytes
ng-spin-kit-5.1.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng-spin-kit/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng-spin-kit</artifactId>
    <version>5.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/ng-spin-kit/
implementation 'org.webjars.npm:ng-spin-kit:5.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/ng-spin-kit/
implementation ("org.webjars.npm:ng-spin-kit:5.1.1")
'org.webjars.npm:ng-spin-kit:jar:5.1.1'
<dependency org="org.webjars.npm" name="ng-spin-kit" rev="5.1.1">
  <artifact name="ng-spin-kit" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='ng-spin-kit', version='5.1.1')
)
libraryDependencies += "org.webjars.npm" % "ng-spin-kit" % "5.1.1"
[org.webjars.npm/ng-spin-kit "5.1.1"]

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.

ng-spin-kit

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

Inspired by angular-spinkit (https://github.com/Urigo/angular-spinkit)

ng-spin-kit

Usage

  1. Install with NPM:
npm install ng-spin-kit --save
  1. Import one component
import { NgSpinKitModule } from 'ng-spin-kit'
  1. Use it:
// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <h3>rotating-plane</h3>
    <sk-rotating-plane></sk-rotating-plane>

    <h3>double-bounce</h3>
    <sk-double-bounce></sk-double-bounce>

    <h3>wave</h3>
    <sk-wave></sk-wave>

    <h3>wandering-cubes</h3>
    <sk-wandering-cubes></sk-wandering-cubes>

    <h3>pulse</h3>
    <sk-pulse></sk-pulse>

    <h3>chasing-dots</h3>
    <sk-chasing-dots></sk-chasing-dots>

    <h3>circle</h3>
    <sk-circle></sk-circle>

    <h3>three-bounce</h3>
    <sk-three-bounce></sk-three-bounce>

    <h3>cube-grid</h3>
    <sk-cube-grid></sk-cube-grid>

    <h3>word-press</h3>
    <sk-word-press></sk-word-press>

    <h3>fading-circle</h3>
    <sk-fading-circle></sk-fading-circle>

    <h3>folding-cube</h3>
    <sk-folding-cube></sk-folding-cube>
  `
})

export class AppComponent {}

// app.module.ts

import { NgModule } from 'angular2/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NgSpinKitModule } from 'ng-spin-kit';

@Component({
  imports: [
    BrowserModule,
    NgSpinKitModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [
    AppComponent
  ]
})

For every component you can set:

[isRunning]: boolean - state of the spinner, true - visible, false - hidden, default: true

[delay]: number - representing the milliseconds to wait, before showing the spinner, default: 0

[color]: string - background color for each item

You can generate JavaScript code based on TypeScript by:

npm run tsc

To regenerate typings:

npm run typings

To compile and run demo app in browser:

npm start

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

org.webjars.npm

Wolters Kluwer Poland

Versions

Version
5.1.1