Three Dots

🔮 CSS loading animations made with single element.
Alternatives To Three Dots
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Spinkit17,264341793 years ago9October 30, 20198mitCSS
A collection of loading indicators animated with CSS
React Content Loader12,76830924915 days ago69March 09, 20229mitTypeScript
⚪ SVG-Powered component to easily create skeleton loadings.
Skeletonview11,743
24a month ago61August 11, 202247mitSwift
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
Nvactivityindicatorview10,318
566a month ago46October 09, 202015mitSwift
A collection of awesome loading animations
Loaders.css10,088838107a year ago4January 13, 201614CSS
Delightful, performance-focused pure css loading animations.
Avloadingindicatorview9,698
a year agon,ullJava
DEPRECATED
Android Spinkit8,38717 months ago3May 02, 202043mitJava
Android loading animations
Svg Loaders5,29622a year ago1February 12, 201913mitHTML
Loading icons and small animations built with pure SVG.
Bootstrap Modal5,072214 years ago1December 31, 2015110apache-2.0JavaScript
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.
Tabanimated3,177
112 days ago69August 12, 202126mitObjective-C
A skeleton screen loading framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架,包含快速植入,低耦合,兼容复杂视图等特点,提供国内主流骨架屏动画的加载方案,同时支持上拉加载更多、自定制动画。)
Alternatives To Three Dots
Select To Compare


Alternative Project Comparisons
Readme

Three Dots

Build Status npm license Financial Contributors on Open Collective

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

$ npm install three-dots --save

Usage

  1. Import the styles in your Sass file:
@use 'three-dots';
  1. 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

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

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

The available variables and their default values.

$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].

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

Popular Animation Projects
Popular Loader Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Css
Scss
Animation
Loading
Sass
Less
Loading Animations