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.
- Include the CSS in your file:
<link href="/path/to/three-dots.css" rel="stylesheet">
- 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
- Checkout this repo and
$ npm install
- Customize the dots size ( color, spacing, etc. ) in the
$dotWidth: 10px; $dotHeight: 10px; $dotRadius: $dotWidth/2; $dotColor: #9880ff; $dotBgColor: $dotColor; $dotBeforeColor: $dotColor; $dotAfterColor: $dotColor; $dotSpacing: $dotWidth + $dotWidth/2;
- Compile Sass files
$ npm run build