Napolean Paced Mischeviously

    three-dots

    0.2.3 • Public • Published

    Three Dots

    npm license Financial Contributors on Open Collective

    The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only enhance your CSS skills but also improve your imagination.

    Installation

    $ npm install three-dots --save

    Usage

    1. Include the CSS in your file:
    <link href="/path/to/three-dots.css" rel="stylesheet">
    1. Add just one div tag:
    <div class="dot-elastic"></div>

    Here’s the list of three-dots classes you can choose from:

    dot-elastic
    dot-pulse
    dot-flashing
    dot-collision
    dot-revolution
    dot-carousel
    dot-typing
    dot-windmill
    dot-bricks
    dot-floating
    dot-fire
    dot-spin
    dot-falling
    dot-stretching
    

    Customization

    1. Checkout this repo and
    $ npm install
    1. Customize the dots size ( color, spacing, etc. ) in the _variables.scss file.
    $dot-width: 10px;
    $dot-height: 10px;
    $dot-radius: $dot-width/2;
    
    $dot-color: #9880ff;
    $dot-bg-color: $dot-color;
    $dot-before-color: $dot-color;
    $dot-after-color: $dot-color;
    
    $dot-spacing: $dot-width + $dot-width/2;
    1. Compile Sass files
    $ npm run build

    Contributors

    Code Contributors

    This project exists thanks to all the people who contribute. [Contribute].

    Financial Contributors

    Become a financial contributor and help us sustain our community. [Contribute]

    Individuals

    Organizations

    Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

    License

    MIT

    Install

    npm i three-dots

    DownloadsWeekly Downloads

    1,877

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    53

    Last publish

    Collaborators

    • nzbin