doc22940 / three-dots

🔮 CSS loading animations made by single element.

Three Dots

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.

The LESS files are contributed by other people, it's not the newest.

Installation

$ npm install three-dots --save

Usage

1. Include the CSS in your file:

<link href="/path/to/three-dots.css" rel="stylesheet">

2. 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

2. 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;

3. 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