Nevertheless Published Mine

    css-loading-spinners

    0.2.0 • Public • Published

    CSS Loading Spinners

    Simple loading spinners in pure CSS.

    NPM License

    Installation

    Add CSS Loading Spinners to your project using your favorite package manager:

    $ npm i --save css-loading-spinners

    or:

    $ yarn add css-loading-spinners

    Usage

    All spinners must be contained within a div with the cls-spinner class. Within this, place the div for the spinner itself.

    <div class="cls-spinner">
      <div class="cls-circle cls-spin"></div>
    </div>

    For a list of all possible spinners, visit the demo page.

    Customization

    If you need to change the color, size, or margin of the spinner, these are adjustable by changing the relevent variables using CSS loaded after the CSS Loading Spinners CSS.

    :root {
      /* default values below */
      --cls-color: #558B6E;
      --cls-sec-color: #EEEEEE;
      --cls-size: 5rem;
      --cls-margin: 1rem;
      --cls-speed: 2s; /* time halved for flip-flop and signal animation */
    }

    These variables can also be set using JavaScript.

    var rootStyles = document.documentElement.style
    rootStyles.setProperty('--cls-color', '#558B6E')
    rootStyles.setProperty('--cls-sec-color', '#EEEEEE')
    rootStyles.setProperty('--cls-size', '5rem')
    rootStyles.setProperty('--cls-margin', '1rem')
    rootStyles.setProperty('--cls-speed', '2s')

    Demo

    View a demo at https://nai888.github.io/css-loading-spinners.

    Install

    npm i css-loading-spinners

    DownloadsWeekly Downloads

    6

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    10.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • nai888