https://github.com/changhuixu/spinner

Angular components for spinners
https://github.com/changhuixu/spinner

angular loader loading loading-bar loading-spinner spinner spinner-components

Last synced: about 2 months ago
JSON representation

Angular components for spinners

• Host: GitHub
• URL: https://github.com/changhuixu/spinner
• Owner: changhuixu
• Created: 2018-03-15T04:06:06.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-02-08T21:50:33.000Z (over 2 years ago)
• Last Synced: 2024-08-08T20:55:53.220Z (about 1 year ago)
• Topics: angular, loader, loading, loading-bar, loading-spinner, spinner, spinner-components
• Language: TypeScript
• Homepage: https://spinner-1f3e5.firebaseapp.com/
• Size: 1.61 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# @uiowa/spinner

[![Build Status](https://github.com/changhuixu/spinner/actions/workflows/main.yml/badge.svg)](https://github.com/changhuixu/spinner/actions)

[![npm](https://img.shields.io/npm/v/@uiowa/spinner.svg?style=flat-square)](https://www.npmjs.com/package/@uiowa/spinner)

CHANGELOG

- **v19** Angular 19+

- **v13** Angular 13+

- **v12** Angular 12+

- **v10** Angular 10+

- **v6** Angular 6+

## [DEMO](https://changhuixu.github.io/spinner/)

[StackBlitz](https://stackblitz.com/github/changhuixu/spinner)

This library only contains three components and doesn't have third party dependencies.

## Components

- `action-spinner`

  Rotating circles. Used for action promise or waiting for page rendering.

  Allow to set spinner size. By default, size is 1rem.

- `loading-bar`

  Beeping blocks. Used for server side data loading.

  Allow to set spinner size. By default, size is 1rem.

- `uiowa-ring`

  Rotating spinner with Golden and Black colors. Used as loading indicator.

  Allow to set spinner size. By default, size is 4rem.

- `loading-placeholder`

  Carousel style one stripe spinner in a white background with box shadow.

  Allow to fit the parent container.

## Usage

```html



  





  





  



Loading...

Loading...



  

    Validating ...

  





  Title

  



 // default size = 4rem



  



```


```typescript

@NgModule({

  declarations: [...],

  imports: [..., SpinnerModule],  // import SpinnerModule

  providers: []

})

export class AppModule {}

```