spinners-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

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

    It 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
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    Opera
    Opera
    IE / Edge
    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 info@adexin.com.

    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.

    Install

    npm i spinners-react

    DownloadsWeekly Downloads

    3,034

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    675 kB

    Total Files

    161

    Last publish

    Collaborators

    • adexin-team