# Three Dots
[](https://www.npmjs.com/package/three-dots)
[](https://github.com/nzbin/three-dots)
[](https://opencollective.com/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
```sh
$ npm install three-dots --save
```
## Usage
1. Include the CSS in your file:
```html
```
2. Add just one `div` tag:
```html
```
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
```bash
$ npm install
```
2. Customize the dots size ( color, spacing, etc. ) in the `_variables.scss` file.
```scss
$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
```bash
$ npm run build
```
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/three-dots/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/three-dots/contribute)]
## License
MIT
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/three-dots/contribute)]
## License
MIT