npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

spinners-angular

v0.0.5

Published

SVG/CSS spinners for Angular

Downloads

2,385

Readme

Spinners Angular

npm License Build Status Coverage Status gzip size

9 awesome spinners built as angular components. Server side rendering with Angular Universal, AOT, Ivy/NGCC and Angular Elements are supported.

Demo

View demo with examples of angular component usage.

Getting started

Installation

$ npm install spinners-angular

or add it directly to HTML page as angular elements

Usage

Add spinners module to module.ts

All spinners at once

import { SpinnersAngularModule } from 'spinners-angular';

@NgModule({
  imports: [ SpinnersAngularModule ]
})

Single spinner

import { SpinnerCircularModule } from 'spinners-angular/spinner-circular';

@NgModule({
  imports: [ SpinnerCircularModule ]
})

Use it in the template

<sa-spinner-circular></sa-spinner-circular>

Hide spinner

For angular component

<sa-spinner-circular [enabled]="false"></sa-spinner-circular>

For angular element

<sa-spinner-circular enabled=""></sa-spinner-circular>

List of components

| 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 ||

Properties

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="{&quot;background-color&quot;: &quot;grey&quot;}"></sa-spinner-circular>

Minimizing Bundle Size

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';

Angular Elements usage

<!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>

Browsers support

| 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.

Issues and Bugs

Let us know if you found a bug!

Spinners for other frameworks

Support and Contact

Have a quick question or need some help? Please do not hesitate to contact us via email at [email protected].

Credits

This component is developed by consulting agency Adexin.

License

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.