https://github.com/nzbin/three-dots

🔮 CSS loading animations made with single element.
https://github.com/nzbin/three-dots

less loading-animations sass single-element-css-spinners three-dots

Last synced: 6 days ago
JSON representation

🔮 CSS loading animations made with single element.

• Host: GitHub
• URL: https://github.com/nzbin/three-dots
• Owner: nzbin
• License: mit
• Created: 2018-01-04T02:34:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-10-23T01:20:05.000Z (about 1 year ago)
• Last Synced: 2024-12-02T00:03:19.869Z (10 days ago)
• Topics: less, loading-animations, sass, single-element-css-spinners, three-dots
• Language: SCSS
• Homepage: https://nzbin.github.io/three-dots/
• Size: 830 KB
• Stars: 1,327
• Watchers: 14
• Forks: 131
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-web-effect - three-dots - 🔮 CSS loading animations made by single element. (🚀 A series of exquisite and compact web page cool effects / Loading Effect)
• awesome-luooooob - nzbin/three-dots - 🔮 CSS loading animations made with single element. (SCSS)
• awesome-web-effect - three-dots - 🔮 CSS loading animations made by single element. (🚀 A series of exquisite and compact web page cool effects / Loading Effect)

README

        
# Three Dots

[![Build Status](https://app.travis-ci.com/nzbin/three-dots.svg?branch=master)](https://app.travis-ci.com/nzbin/three-dots)

[![npm](https://img.shields.io/npm/v/three-dots.svg)](https://www.npmjs.com/package/three-dots)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/nzbin/three-dots)

[![Financial Contributors on Open Collective](https://opencollective.com/three-dots/all/badge.svg?label=financial+contributors)](https://opencollective.com/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

```sh

npm install three-dots --save

```

## Usage

1. Import the styles in your Sass file:

```scss

@use 'three-dots';

```

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

Customize the dot's size ( color, spacing, etc. ) with Dart Sass API.

```scss

@use 'three-dots' with (

  $dot-width: 20px,

  $dot-height: 20px,

  ...

);

```

The available variables and their default values.

```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;

```

## 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