WoltersKluwerPL / Ng Spin Kit
Licence: mit
SpinKit (http://tobiasahlin.com/spinkit/) spinners for Angular
Stars: β 90
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Ng Spin Kit
React Spinners Kit
A collection of loading spinners with React.js
Stars: β 158 (+75.56%)
Mutual labels: spinner, spinners
ZXLoadingView
πZXLoadingView is an iOS progress-activity
Stars: β 14 (-84.44%)
Mutual labels: spinner, spinners
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: β 2,940 (+3166.67%)
Mutual labels: spinner, spinners
Materialspinner
Implementation of a Material Spinner for Android with TextInputLayout functionalities
Stars: β 107 (+18.89%)
Mutual labels: spinner, spinners
spinner
A simple, configurable, multi-platform spinner
Stars: β 42 (-53.33%)
Mutual labels: spinner, spinners
Spinners React
Lightweight SVG/CSS spinners for React
Stars: β 254 (+182.22%)
Mutual labels: spinner, spinners
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: β 27 (-70%)
Mutual labels: spinner, spinners
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: β 21 (-76.67%)
Mutual labels: spinner, spinners
nanospinner
π The simplest and tiniest terminal spinner for Node.js
Stars: β 108 (+20%)
Mutual labels: spinner, spinners
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: β 111 (+23.33%)
Mutual labels: spinner, spinners
Progress bar
Command-line progress bars and spinners for Elixir.
Stars: β 281 (+212.22%)
Mutual labels: spinner, spinners
react-awesome-loaders
π High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: β 146 (+62.22%)
Mutual labels: spinner, spinners
Whirl
CSS loading animations with minimal effort!
Stars: β 774 (+760%)
Mutual labels: spinner, spinners
Fliplog
fluent logging with verbose insight, colors, tables, emoji, filtering, spinners, progress bars, timestamps, capturing, stack traces, tracking, presets, & more...
Stars: β 41 (-54.44%)
Mutual labels: spinner
Angular Cli Webpack
Webpack configuration modifier for @angular/cli
Stars: β 72 (-20%)
Mutual labels: ng
Spinnercpp
Simple header only library to add a spinner / progress indicator to any terminal application.
Stars: β 37 (-58.89%)
Mutual labels: spinner
Spinners
A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators
Stars: β 33 (-63.33%)
Mutual labels: spinner
Ngcontextmenu
Handcraft your very own context menus for a richer UX!
Stars: β 81 (-10%)
Mutual labels: ng
Hintspinner
An Android Spinner lilbrary with Hint/Header
Stars: β 28 (-68.89%)
Mutual labels: spinner
ng-spin-kit
SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for Angular
Inspired by angular-spinkit (https://github.com/Urigo/angular-spinkit)
Usage
- Install with NPM:
npm install ng-spin-kit --save
- Import one component
import { NgSpinKitModule } from 'ng-spin-kit'
- 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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].