https://github.com/brikcss/spinner
Loading spinner icon. Patterned after Material Design's circular activity indicator.
https://github.com/brikcss/spinner
Last synced: 12 months ago
JSON representation
Loading spinner icon. Patterned after Material Design's circular activity indicator.
- Host: GitHub
- URL: https://github.com/brikcss/spinner
- Owner: brikcss
- Created: 2018-04-09T22:37:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T20:43:43.000Z (over 7 years ago)
- Last Synced: 2025-03-15T07:16:14.401Z (over 1 year ago)
- Language: JavaScript
- Size: 151 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Activity Spinner Icon
> Loading activity spinner icon. Patterned after Material Design's [circular activity indicator](https://material.io/guidelines/components/progress-activity.html#progress-activity-types-of-indicators).
## Environment / tooling support
| Node/CommonJS | CLI | UMD | ESModule | VanillaJS | AngularJS | CSS | SASS |
|:-------------:|:---:|:---:|:--------:|:---------:|:---------:|:---:|:----:|
| ✔ | x | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
## Install
1. Install package:
```sh
npm install @brikcss/spinner
```
2. Include CSS or SASS files from one of:
```
/dist
/css
/sass
```
3. Include JS files from one of:
```
/dist
/angularjs
/commonjs
/esmodule
/umd
/vanillajs
```
## JS Usage
### Spinner API
- **`all`**: All spinner instances, by ID.
- **`Spinner.create(element, options = {})`**: Create and return a spinner instance.
- **`Spinner.toggle(id)`**: Toggle a spinner instance.
- **`Spinner.load(id)`** Load / activate a spinner instance.
- **`Spinner.unload(id)`** Unload / deactivate a spinner instance.
- **`Spinner.destroy(id)`** Destroy a spinner instance.
_Note: Each method returns the spinner instance, except the `destroy` method returns a Boolean._
### Spinner instance
You can call most of the same methods from the spinner instance without knowing the spinner's ID.
- **`instance.toggle()`**: Toggle a spinner instance.
- **`instance.load()`** Load / activate a spinner instance.
- **`instance.unload()`** Unload / deactivate a spinner instance.
- **`instance.destroy()`** Destroy a spinner instance.
### AngularJS
The AngularJS `SpinnerService` is simply a thin wrapper around the vanilla core Spinner service, with the following directives added for convenience in interacting with Spinner:
- **``** Create a spinner element in the DOM.
- **`[spinner-toggle="{{id}}"]`** Toggle the spinner that matches `id`.
To toggle a spinner with a controller variable, use the `ng-class` directive to toggle the active class:
```html
```
## CSS Usage
### Classes
- `spinner`: Spinner base class. _Note: This won't show anything in the UI until the spinner has the active class modifier._
- `spinner--is-spinning`: Activate the spinner and show in the UI.
- `spinner--small`: Small spinner.
- `spinner--large`: Large spinner.
- `spinner--inline`: Inline spinner. For display with inline elements such as text or buttons.
- `spinner--multicolor`: Multicolor spinner track.
- `spinner--dressed`: "Dresses" spinner with a background and padding.
- `spinner--clean`: Cleans up background and padding from a dressed spinner.
- `spinner--absolute`: Absolutely positioned spinner.
- `spinner--slide`: Spinner which slides from the top of an element.