🔮 CSS loading animations made by single element.

Last update: Dec 29, 2022

Overview

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

$ npm install three-dots --save

Usage

Include the CSS in your file:

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

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

Checkout this repo and

$ npm install

Customize the dots size ( color, spacing, etc. ) in the _variables.scss file.

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

Compile Sass files

$ npm run build

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT

⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Sep 29, 2021

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Jul 27, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

.qube -- The Quintessential Responsive 3D CSS Cube

.qube Quintessential Responsive 3D CSS Cube Created by @zacharyjohnson — zachstronaut.com Hello web friend! The styles defined in "src/qube.css" provi

Dec 17, 2022

:package: Introduction to CSS 3D transforms

Intro to CSS 3D transforms By David DeSandro 3dtransforms.desandro.com Tutorial, examples, and discussion all about CSS 3D transforms. Originally writ

Jan 2, 2023

CSS 3D Dropdown Concept

Makisu An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. Check out the demo (you'll need a CSS 3D capable browser, such as Chrom

Nov 28, 2022

3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

Nov 14, 2022

Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

Apr 15, 2021

CSS 3D renderer for Three.js.

CSS3D.js by Steven Wittens CSS 3D renderer for Three.js Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is i

Aug 27, 2022

Releases(v0.3.2)

v0.3.2(Dec 1, 2022)
replace the script prepublish with prepublishOnly in package.json

rebuild for correcting the versions of dist files

Source code(tar.gz)
Source code(zip)
v0.3.1(Dec 1, 2022)
Bug Fixes

remove the main field for package.json and fix the missing _index.scss

Source code(tar.gz)
Source code(zip)
v0.3.0(Dec 1, 2022)
BREAKING CHANGES

renaming the source folder sass to scss

Features

rebuild with Dart Sass @use-based API.

@use 'three-dots' with ( $dot-width: 20px, $dot-height: 20px, ... );

You can also import a single module and configuring it.

@use 'three-dots/scss/variables' with ( $dot-width: 20px, $dot-height: 20px, ... ); @use 'three-dots/scss/dot-pulse';

Source code(tar.gz)
Source code(zip)
v0.2.3(Dec 3, 2021)
align Less files with Sass and improve

Source code(tar.gz)
Source code(zip)
v0.2.2(Nov 21, 2021)
replace divide (/) with multiply (*) to compatible with Dart Sass (#18)(d43d42b54df8c18e9a68fe9afca8b44e9e2c5897)

Source code(tar.gz)
Source code(zip)
v0.2.1(May 7, 2021)
Bug Fixes

dot-pulse: remove box-shadow color and use color prop instead.

Source code(tar.gz)
Source code(zip)
v0.2.0(Feb 16, 2020)
Features

rename variables from camelCase to kebab-case

Source code(tar.gz)
Source code(zip)
v0.1.2(Jan 5, 2019)
add postcss config

correct scripts in package.json

Source code(tar.gz)
Source code(zip)
v0.1.1(Dec 26, 2018)
Features

published on npm 🎉

Source code(tar.gz)
Source code(zip)

Owner

Zongbin

FE Developer, UX Designer

GitHub https://nzbin.github.io/three-dots/

Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

21 Nov 15, 2021

Some ideas for modern multi-layer page transitions using CSS Animations.

Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore

117 Nov 1, 2022

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

477 Nov 12, 2022

Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

97 Dec 8, 2022

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

721 Dec 6, 2022

🔮 CSS loading animations made by single element.

Related tags

Overview

Three Dots

Installation

Usage

Customization

Contributors

Code Contributors

Financial Contributors

Individuals

Organizations

License

You might also like...

Releases(v0.3.2)

v0.3.2(Dec 1, 2022)

v0.3.1(Dec 1, 2022)

Bug Fixes

v0.3.0(Dec 1, 2022)

BREAKING CHANGES

Features

v0.2.3(Dec 3, 2021)

v0.2.2(Nov 21, 2021)

v0.2.1(May 7, 2021)

Bug Fixes

v0.2.0(Feb 16, 2020)

Features

v0.1.2(Jan 5, 2019)

v0.1.1(Dec 26, 2018)

Features

Owner

Zongbin

Pure css cross-browser loading animations.

Some ideas for modern multi-layer page transitions using CSS Animations.

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Loading effects for assets including some built in animated reveals

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

A React component for creating typing animations.

Modern ways of revealing new content using SVG animations.

Create cool animated SVG spinners, loaders and other looped animations in seconds

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

Add a retro/vintage effect to images using the HTML5 canvas element