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: 20 days 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 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T05:54:50.000Z (over 1 year ago)
• Last Synced: 2024-10-13T11:12:54.178Z (about 1 month 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: 2
• 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))

[![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponents&url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Fng-spinners)](https://bit.dev/joshk/ng-spinners)

[![npm version](https://badge.fury.io/js/ng-spinners.svg)](http://badge.fury.io/js/ng-spinners)

[![GitHub stars](https://img.shields.io/github/stars/joshk2/ng-spinners)](https://github.com/JoshK2/ng-spinners/stargazers)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/ng-spinners/master/LICENSE)

[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](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)