Three Dots
Three Dots is a set of CSS loading animations made with 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
- Import the styles in your Sass file:
@use 'three-dots';
- 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
Customize the dot’s size ( color, spacing, etc. ) with Dart Sass API.
@use 'three-dots' with (
$dot-width: 20px,
$dot-height: 20px,
...
);
The available variables and their default values.
$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;
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