/three-dots

🔮 CSS loading animations made by single element.

Primary LanguageCSSMIT LicenseMIT

Three Dots

npm license

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">
  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.
$dotWidth: 10px;
$dotHeight: 10px;
$dotRadius: $dotWidth/2;

$dotColor: #9880ff;
$dotBgColor: $dotColor;
$dotBeforeColor: $dotColor;
$dotAfterColor: $dotColor;

$dotSpacing: $dotWidth + $dotWidth/2;
  1. Compile Sass files
$ npm run build

License

MIT