https://github.com/joshk2/ng-spinners
Amazing collection of Angular spinners components with pure css.
https://github.com/joshk2/ng-spinners
angular angular-components animation components loader ng-spinners spinner spinners
Last synced: 9 months ago
JSON representation
Amazing collection of Angular spinners components with pure css.
- Host: GitHub
- URL: https://github.com/joshk2/ng-spinners
- Owner: JoshK2
- License: mit
- Created: 2019-08-05T10:45:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T05:54:50.000Z (about 3 years ago)
- Last Synced: 2025-06-29T20:47:53.449Z (9 months ago)
- Topics: angular, angular-components, animation, components, loader, ng-spinners, spinner, spinners
- Language: TypeScript
- Homepage: https://bit.dev/joshk/ng-spinners
- Size: 1.28 MB
- Stars: 29
- Watchers: 1
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [React](https://github.com/JoshK2/react-spinners-css))
[](https://bit.dev/joshk/ng-spinners)
[](http://badge.fury.io/js/ng-spinners)
[](https://github.com/JoshK2/ng-spinners/stargazers)
[](https://github.com/prettier/prettier)
[](https://raw.githubusercontent.com/JoshK2/ng-spinners/master/LICENSE)
[](https://twitter.com/JoshKuttler)
Amazing collection of Angular spinners components with pure css.
The Angular spinners are based on loading.io and from all over the web.
- 💅No extra CSS imports
- ✂️Zero dependencies
- 📦Spinners can be installing separately
## [Live Demo](https://bit.dev/joshk/ng-spinners)
Browse components and explore their props with [Bit](https://bit.dev/joshk/ng-spinners).
Install specific angular spinner component with npm, yarn or bit without having to install the whole project.
[Install components and live demo](https://bit.dev/joshk/ng-spinners)
## 🚀 List of Spinners - Input and Default Property
Each component accepts a `color` prop, and few accepts also `size` prop.
The default `color` prop is `#7f58af`.
Component that accepts `size` prop have a default size in pixel.
| Spinner | color: string | size: number |
| -------------------------------------- | ------------ | ------------- |
| `` | `#7f58af` | `64` |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| ``| `#7f58af` | - |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
## 📦 Installation
### Using [npm](https://www.npmjs.com/package/ng-spinners) to install ng-spinners
```
npm i --save ng-spinners
```
### Play and install spinners for Angular with [Bit](https://bit.dev/joshk/ng-spinners)
Install specific Angular spinner component/module with bit, npm or yarn without having to install the whole project
Using [bit](https://bit.dev/joshk/ng-spinners) to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
```bash
npm config set '@bit:registry' https://node.bit.dev
```
and use your favorite package manager:
```bash
npm i @bit/joshk.ng-spinners.facebook-loader
yarn add @bit/joshk.ng-spinners.facebook-loader
bit import joshk.ng-spinners/facebook-loader
```
## 💻 Usage Examples
module file example:
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//using npm or yarn
import { FacebookLoaderModule } from 'ng-spinners';
//using bit
import { FacebookLoaderModule } from '@bit/joshk.ng-spinners.facebook-loader';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FacebookLoaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
component html file example:
```html
```
Complete example of this component can be found [here](https://bit.dev/joshk/ng-spinners/facebook-loader).
## 👾 Development
You can see the components locally by cloning this repo and doing the following steps:
- Install dependencies from `package.json`, run: `npm install`.
- Run the app in the development mode, run: `npm run start`.
## 🙌 Contributing
- Pull requests and ⭐ stars are always welcome.
- For bugs and feature requests, please create an issue.
## 👏🏻 Support my open-source
If you like to support my open-source contributions please star and share this project. 💫
## 📄 License
[MIT](https://github.com/JoshK2/ng-spinners/blob/master/LICENSE)