Fancy Three-dots Loading Spinners With Pure CSS – Three Dots

Category: CSS & CSS3 , Loading , Recommended | June 16, 2018
Author: nzbin
Views Total: 81
Official Page: Go to website
Last Update: June 16, 2018
License: MIT


Fancy Three-dots Loading Spinners With Pure CSS – Three Dots


Three Dots is a small CSS/CSS3 library that provides a set of 18 fancy animated loading spinners created with three dots.

You can implement the loading spinners with a single element such as DIV.

See also:

How to use it:

Install & download the Three Dots library via NPM:

$ npm install three-dots --save

Or directly insert the stylesheet three-dots.min.css in the head section of the document.

<link rel="stylesheet" href="css/three-dots.min.css">

Add the animation type of your choice to the element where you want to display the loading spinner.

<div class="dot-elastic"></div>

<div class="dot-pulse"></div>

<div class="dot-flashing"></div>

<div class="dot-collision"></div>

<div class="dot-revolution"></div>

<div class="dot-translation"></div>

<div class="dot-typing"></div>

<div class="dot-windmill"></div>

<div class="dot-bricks"></div>

<div class="dot-floating"></div>



  • Add dot-fire animation


  • Improved codes variables and format


  • Add new & experimental animations


  • Add dot-spin animation

Leave a Reply