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

v1.0.10

Published

Lightweight SVG/CSS spinners for React

Downloads

53,868

Readme

Spinners React

npm License Build Status Coverage Status gzip size

9 awesome typescript-aware lightweight spinners built as react.js components.

Demo

View demo with examples of react.js component usage.

Getting started

Installation

$ npm install spinners-react

or add it directly to HTML page

Usage

import { SpinnerCircular } from 'spinners-react';

<SpinnerCircular />

Hide spinner

<SpinnerCircular enabled={false} />

List of components

| Component | Example | Component | Example | Component | Example | |-----------|---------|-----------|---------|-----------|---------| |SpinnerCircular||SpinnerCircularFixed| |SpinnerCircularSplit| | |SpinnerRound ||SpinnerRoundOutlined| |SpinnerRoundFilled || |SpinnerDotted ||SpinnerInfinity | |SpinnerDiamond ||

Properties

The following optional properties are available. All extra props will be passed to the component's root SVG element.

| 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.| |style |undefined |object |Pass CSS styles to the root SVG element|

Server Side Rendering

While the library works with SSR, the spinner's animation CSS will be attached to the head only on the hydrate phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:

/* App.css */

/* to load animation for a specific spinner */
@import "~spinners-react/lib/SpinnerCircular.css";

/* to load animations for all spinners at once */
@import "~spinners-react/lib/index.css";

Minimizing Bundle Size

The library is thin and do not rely on any style library / runtime to be used. To reduce the bundle size even more load only the used components. If you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:

import { SpinnerCircular } from 'spinners-react';

If that's not the case you're able to use path imports to avoid pulling in unused spinners:

// ESM
import { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';
// or CJS
const { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');
// or UMD
const { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');

UMD bundle usage

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- to load a specific spinner -->
    <script src="https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js"></script>
    <!-- to load all spinners at once -->
    <script src="https://unpkg.com/spinners-react/lib/umd/index.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script>
      ReactDOM.render(
        React.createElement(SpinnersReact.SpinnerCircular),
        document.getElementById('root')
      );
    </script>
  </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 SpinnerRound and SpinnerRoundOutlined.

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 React is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.