nzbin / Three Dots
Licence: mit
🔮 CSS loading animations made by single element.
Stars: ✭ 912
Projects that are alternatives of or similar to Three Dots
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-91.12%)
Mutual labels: scss, sass, less
Bootstrap 4 Utilities
Bootstrap 4 utility classes in LESS CSS for Bootstrap 3 or any other projects.
Stars: ✭ 105 (-88.49%)
Mutual labels: scss, sass, less
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+925.22%)
Mutual labels: scss, sass, less
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-87.28%)
Mutual labels: scss, sass, less
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-81.47%)
Mutual labels: scss, sass, less
Prejss
Get the power of PostCSS with plugins in your JSS styles. 🎨 Just put CSS into JS and get it as JSS object.
Stars: ✭ 238 (-73.9%)
Mutual labels: scss, sass, less
Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-90.9%)
Mutual labels: scss, sass, less
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-85.31%)
Mutual labels: scss, sass, less
Style Resources Loader
CSS processor resources loader for webpack
Stars: ✭ 214 (-76.54%)
Mutual labels: scss, sass, less
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (-71.49%)
Mutual labels: scss, sass, less
Tabler
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Stars: ✭ 24,611 (+2598.57%)
Mutual labels: scss, sass
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
Stars: ✭ 627 (-31.25%)
Mutual labels: scss, sass
Wenk
😉 Lightweight pure CSS tooltip for the greater good
Stars: ✭ 694 (-23.9%)
Mutual labels: scss, less
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (-20.07%)
Mutual labels: scss, sass
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].