spinners-angular-workspace
Advanced tools
[](http://npm.im/spinners-angular) [](https://github.com/adexin/spinners-angular/blob/master/LICENSE.md) [![Build Status]
9 awesome spinners built as angular components. Server side rendering with Angular Universal, AOT, Ivy/NGCC and Angular Elements are supported.
View demo with examples of angular component usage.
$ npm install spinners-angular
or add it directly to HTML page as angular elements
Add spinners module to module.ts
import { SpinnersAngularModule } from 'spinners-angular';
@NgModule({
imports: [ SpinnersAngularModule ]
})
import { SpinnerCircularModule } from 'spinners-angular/spinner-circular';
@NgModule({
imports: [ SpinnerCircularModule ]
})
Use it in the template
<sa-spinner-circular></sa-spinner-circular>
For angular component
<sa-spinner-circular [enabled]="false"></sa-spinner-circular>
For angular element
<sa-spinner-circular enabled=""></sa-spinner-circular>
| Component | Example | Component | Example | Component | Example |
|---|---|---|---|---|---|
sa-spinner-circular |  | sa-spinner-circular-fixed |  | sa-spinner-circular-split |  |
sa-spinner-round |  | sa-spinner-round-outlined |  | sa-spinner-round-filled |  |
sa-spinner-dotted |  | sa-spinner-infinity |  | sa-spinner-diamond |  |
The following optional properties are available.
| Property | Default value | Type | Description |
|---|---|---|---|
| size | 50 | number or string | Set the size as number of pixels or any valid CSS string (e.g. size="100%"). |
| thickness | 100 | number | Set lines width as a percentage of default thickness. |
| сolor | '#38ad48' | string | Set the color. Can be set to any valid CSS string (hex, rgb, rgba). |
| secondaryColor | 'rgba(0,0,0,0.44)' | string | Set the secondary color. Can be set to any valid CSS string (hex, rgb, rgba). |
| speed | 100 | number | Set the animation speed as a percentage of default speed. |
| enabled | true | boolean | Show/Hide the spinner. |
| still | false | boolean | Disable/Enable spinner animation. |
| styles | undefined | object | Pass CSS styles to the root SVG element |
Use dash-separated lowercase for angular elements attribute names. Web Components don't support passing anything other than string values via attributes, thus for "styles" attribute you can either set property with js:
<script>
document.querySelector('sa-spinner-circular').styles = { 'background-color': 'grey' };
</script>
or pass object as json string:
<!-- using single quotes to wrap json -->
<sa-spinner-circular-fixed styles='{"background-color": "red"}'></sa-spinner-circular-fixed>
<!-- escaping quotes -->
<sa-spinner-circular styles="{"background-color": "grey"}"></sa-spinner-circular>
As well as loading all spinners at once it's possible to leverage code splitting and load a specific one:
import { SpinnersAngularModule } from 'spinners-angular';
vs
import { SpinnerCircularModule } from 'spinners-angular/spinner-circular';
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/spinners-angular/elements/polyfills-es5.js"></script>
<script src="https://unpkg.com/spinners-angular/elements/runtime-es5.js"></script>
<!--
to load a specific spinner
(only one supported, load all spinners if more than one is used to reduce loaded js size)
-->
<script src="https://unpkg.com/spinners-angular/elements/spinner-circular-es5.js"></script>
<!-- to load all spinners at once -->
<script src="https://unpkg.com/spinners-angular/elements/spinners-es5.js"></script>
</head>
<body>
<sa-spinner-circular></sa-spinner-circular>
</body>
</html>
 Firefox |  Chrome |  Safari |  Opera |  Edge |
|---|---|---|---|---|
| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions* |
* - Legacy EdgeHTML Edge (i.e. 42-44) is also supported except for sa-spinner-round and sa-spinner-round-outlined.
Let us know if you found a bug!
Have a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.
This component is developed by consulting agency Adexin.
Spinners Angular is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
FAQs
[](http://npm.im/spinners-angular) [](https://github.com/adexin/spinners-angular/blob/master/LICENSE.md) [![Build Status]
The npm package spinners-angular-workspace receives a total of 0 weekly downloads. As such, spinners-angular-workspace popularity was classified as not popular.
We found that spinners-angular-workspace demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.