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

Category: CSS & CSS3 , Loading , Recommended | November 17, 2023
Author:nzbin
Views Total:200 views
Official Page:Go to website
Last Update:November 17, 2023
License:MIT

Preview:

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

Description:

Three Dots is a small CSS/CSS3 library that provides a set of 20 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
$ 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-carousel"></div>
<div class="dot-typing"></div>
<div class="dot-windmill"></div>
<div class="dot-bricks"></div>
<div class="dot-floating"></div>
<div class="dot-fire"></div>
<div class="dot-skin"></div>
<div class="dot-falling"></div>
<div class="dot-sketching"></div>

Changelog:

11/17/2023

  • v0.3.2

01/07/2019

  • v0.1.2

12/28/2018

  • v0.1.1

06/23/2018

  • Added new animation

06/20/2018

  • Added dot-rolling animation

06/16/2018

  • Add dot-fire animation

06/14/2018

  • Improved codes variables and format

06/13/2018

  • Add new & experimental animations

06/12/2018

  • Add dot-spin animation

You Might Be Interested In:


2 thoughts on “Fancy Three-dots Loading Spinners With Pure CSS – Three Dots

  1. sanidhya

    Refused to apply style from ‘http://localhost:3000/chats/css/three-dots.min.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

    Reply

Leave a Reply