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

@joshdoescode/loading-spinner-component

v0.1.4

Published

A SVG/CSS3 based loading-spinner, using a service for global interaction. Built for Angular CLI (Angular 4).

Downloads

1

Readme

Loading Spinner Notes

Documentation still in progress.

Angular CLI component with service.

Setup

You need to add the service and module references to the app.module file

import { SpinnerService } from '@tifbs/loading-spinner-component/service/spinner.service';

import { SpinnerComponent } from '@tifbs/loading-spinner-component/spinner.component';

declarations: [ ... SpinnerComponent ],

providers: [ ... SpinnerService ],

ng lint

Because this is a Angular Component; 'ng lint' will try to evaluate it, and will pick up that the prefix to the selector does not match your own project's.

To remove this from the linting; open your '.angular-cli.json' file, and find the 'lint' section.

Add:

"exclude": "**/node_modules/**/*"

To the first entry in the list:

"lint": [

{

"project": "src/tsconfig.app.json",

"exclude": "**/node_modules/**/*"

},

...

Use

The spinner uses a service so that it can be called for anywhere in the application without repitition of elements.

Directive

The directive should be placed in the app.component.html file, so that it is present for all other components.

<tifbs-loading-spinner></tifbs-loading-spinner>

When the app starts loading

To start the spinner as soon as the app starts loading; add the following extract to the 'src/index.html' file, in between the '<[prefix]-root>' tags:

<div class="spinner-non"></div>

and include the CSS file in your root styles file:

@import "../node_modules/@tifbs/loading-spinner-component/spinner.component.css"

This will then be replaced with the application content once it loads.

The Service

You use the SpinnerService to show and hide the spinner.

Inject the service in to whichever component will use it, and then use the 'showSpinner()' and 'hideSpinner()' function to show or hide the spinner.

You can use 'showOverlay([boolean] show)' to set whether the overlay element should be shown when the spinner is.

Spinner when calling services

To display to spinner whilst you are waiting for a reply from a service; use '.showSpinner()' before you make the call, and add '.hideSpinner()' once you receive the response.

Make sure that you add the '.hideSpinner()' to both the success, and error, response functions:

this.loadingSpinner.showSpinner();

this.myService.getData(x)

.subscribe(data => this.data = data,

(error) => { this.errorMessage = <any>error; this.loadingSpinner.hideSpinner(); },

() => { this.loadingSpinner.hideSpinner(); });

}

.