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.
$ npm install three-dots --save
- Import the styles in your Sass file:
- Add just one
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
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;
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]