Repository: ConnorAtherton/loaders.css
Branch: master
Commit: dee8aabed3ad
Files: 47
Total size: 113.4 KB
Directory structure:
gitextract_ql7r3u9_/
├── .gitignore
├── .scss-lint.yml
├── Gulpfile.coffee
├── README.md
├── bower.json
├── demo/
│ ├── demo.css
│ ├── demo.html
│ └── src/
│ ├── demo.jade
│ └── demo.scss
├── loaders.css
├── loaders.css.js
├── package.json
└── src/
├── _functions.scss
├── _mixins.scss
├── _variables.scss
├── animations/
│ ├── ball-beat.scss
│ ├── ball-clip-rotate-multiple.scss
│ ├── ball-clip-rotate-pulse.scss
│ ├── ball-clip-rotate.scss
│ ├── ball-grid-beat.scss
│ ├── ball-grid-pulse.scss
│ ├── ball-pulse-rise.scss
│ ├── ball-pulse-round.scss
│ ├── ball-pulse-sync.scss
│ ├── ball-pulse.scss
│ ├── ball-rotate.scss
│ ├── ball-scale-multiple.scss
│ ├── ball-scale-random.scss
│ ├── ball-scale-ripple-multiple.scss
│ ├── ball-scale-ripple.scss
│ ├── ball-scale.scss
│ ├── ball-spin-fade-loader.scss
│ ├── ball-spin-loader.scss
│ ├── ball-triangle-path.scss
│ ├── ball-zig-zag-deflect.scss
│ ├── ball-zig-zag.scss
│ ├── cube-transition.scss
│ ├── line-scale-pulse-out-rapid.scss
│ ├── line-scale-pulse-out.scss
│ ├── line-scale-random.scss
│ ├── line-scale.scss
│ ├── line-spin-fade-loader.scss
│ ├── pacman.scss
│ ├── semi-circle-spin.scss
│ ├── square-spin.scss
│ └── triangle-skew-spin.scss
└── loaders.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Created by https://www.gitignore.io
### Sass ###
.sass-cache
*.css.map
### Node ###
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
================================================
FILE: .scss-lint.yml
================================================
scss_files: "**/*.scss"
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BorderZero:
enabled: true
convention: zero # or `none`
ColorKeyword:
enabled: true
ColorVariable:
enabled: true
Comment:
enabled: true
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line # or 'new_line'
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: true
EmptyRule:
enabled: true
FinalNewline:
enabled: true
present: true
HexLength:
enabled: true
style: short # or 'long'
HexNotation:
enabled: true
style: lowercase # or 'uppercase'
HexValidation:
enabled: true
IdSelector:
enabled: true
ImportantRule:
enabled: true
ImportPath:
enabled: true
leading_underscore: false
filename_extension: false
Indentation:
enabled: true
allow_non_nested_indentation: false
character: space # or 'tab'
width: 2
LeadingZero:
enabled: true
style: exclude_zero # or 'include_zero'
MergeableSelector:
enabled: true
force_nesting: true
NameFormat:
enabled: true
allow_leading_underscore: true
convention: hyphenated_lowercase # or 'BEM', or a regex pattern
NestingDepth:
enabled: true
max_depth: 3
PlaceholderInExtend:
enabled: true
PropertyCount:
enabled: false
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: true
ignore_unspecified: false
separate_groups: false
PropertySpelling:
enabled: true
extra_properties: []
QualifyingElement:
enabled: true
allow_element_with_attribute: false
allow_element_with_class: false
allow_element_with_id: false
SelectorDepth:
enabled: true
max_depth: 3
SelectorFormat:
enabled: true
convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
Shorthand:
enabled: true
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
SpaceAfterPropertyColon:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
SpaceAfterPropertyName:
enabled: true
SpaceBeforeBrace:
enabled: true
style: space # or 'new_line'
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: single_quotes # or double_quotes
TrailingSemicolon:
enabled: true
TrailingZero:
enabled: false
UnnecessaryMantissa:
enabled: true
UnnecessaryParentReference:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
VariableForProperty:
enabled: false
properties: []
VendorPrefix:
enabled: true
identifier_list: base
additional_identifiers: []
excluded_identifiers: []
ZeroUnit:
enabled: true
Compass::*:
enabled: false
================================================
FILE: Gulpfile.coffee
================================================
gulp = require 'gulp'
sass = require 'gulp-sass'
jade = require 'gulp-jade'
cssmin = require 'gulp-cssmin'
rename = require 'gulp-rename'
autoprefixer = require 'gulp-autoprefixer'
gutil = require 'gulp-util'
plumber = require 'gulp-plumber'
gulp.task 'scss:compile', ->
gulp.src './src/loaders.scss'
.pipe plumber((err) -> console.log(err.stack))
.pipe sass()
.pipe autoprefixer "last 2 versions", "> 1%", "ie 8", {
map: false
}
.pipe plumber.stop()
.pipe gulp.dest('./')
.pipe cssmin()
.pipe rename suffix: '.min'
.pipe gulp.dest './'
.on 'finish', -> gutil.log('scss build finished.')
gulp.task 'demo:scss:compile', ->
gulp.src './demo/src/demo.scss'
.pipe sass({errLogToConsole: true}).on("error", gutil.log).on("error", gutil.beep)
.pipe gulp.dest './demo/'
gulp.task 'demo:jade:compile', ->
gulp.src './demo/src/*.jade'
.pipe jade(pretty: true)
.pipe gulp.dest './demo/'
gulp.task 'watch', ->
gulp.watch 'src/**/*.scss', ['scss:compile']
gulp.watch 'demo/src/**/*.scss', ['demo:scss:compile']
gulp.watch 'demo/src/**/*.jade', ['demo:jade:compile']
gulp.task 'demo', ['demo:scss:compile', 'demo:jade:compile']
gulp.task 'default', ['scss:compile', 'demo', 'watch']
================================================
FILE: README.md
================================================
<h1 align="center">Loaders.css</h1>
<p align="center">
<img src="https://img.shields.io/npm/v/loaders.css.svg?style=flat-square">
<img src="https://img.shields.io/bower/v/loaders.css.svg?style=flat-square">
</p>
Delightful and performance-focused pure css loading animations.
### What is this?
[See the demo](http://connoratherton.com/loaders)
A collection of loading animations written entirely in css.
Each animation is limited to a small subset of css properties in order
to avoid expensive painting and layout calculations.
I've posted links below to some fantastic articles that go into this
in a lot more detail.
### Install
```
bower install loaders.css
```
```
npm i --save loaders.css
```
### Usage
##### Standard
- Include `loaders.min.css`
- Create an element and add the animation class (e.g. `<div class="loader-inner ball-pulse"></div>`)
- Insert the appropriate number of `<div>`s into that element
##### jQuery (optional)
- Include `loaders.min.css`, jQuery, and `loaders.css.js`
- Create an element and add the animation class (e.g. `<div class="loader-inner ball-pulse"></div>`)
- `loaders.js` is a simple helper to inject the correct number of div elements for each animation
- To initialise loaders that are added after page load select the div and call `loaders` on them (e.g. `$('.loader-inner').loaders()`)
- Enjoy
### Customising
##### Changing the background color
Add styles to the correct child `div` elements
``` css
.ball-grid-pulse > div {
background-color: orange;
}
```
##### Changing the loader size
Use a [2D Scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) `transform`
```css
.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}
```
### Browser support
Check the [can I use](http://caniuse.com/#search=css-animation) [tables](http://caniuse.com/#search=css-transform).
All recent versions of the major browsers are supported and it has support back to IE9.
Note: The loaders aren't run through autoprefixer, see this [issue](https://github.com/ConnorAtherton/loaders.css/issues/18).
IE 11 | Firefox 36 | Chrome 41 | Safari 8
------ | ---------- | --------- | --------
✔ | ✔ | ✔ | ✔
### Contributing
Pull requests are welcome! Create another file in `src/animations`
and load it in `src/loader.scss`.
In a separate tab run `gulp --require coffee-script/register`. Open `demo/demo.html`
in a browser to see your animation running.
### Further research
- http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- http://aerotwist.com/blog/pixels-are-expensive/
- http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
- http://frontendbabel.info/articles/webpage-rendering-101/
### Inspired by loaders.css
A few other folks have taken loaders and ported them elsewhere.
- **React** - [Jon Jaques](https://github.com/jonjaques) built a React demo you can check out [here](https://github.com/jonjaques/react-loaders)
- **Vue** - [Kirill Khoroshilov](https://github.com/Hokid) loaders wrapped into components [vue-loaders](https://github.com/Hokid/vue-loaders)
- **Angular** - [the-corman](https://github.com/the-cormoran/angular-loaders) created some directives for angular, as did [Masadow](https://github.com/Masadow) in [this pr](https://github.com/ConnorAtherton/loaders.css/pull/50)
- **Ember** - [Stanislav Romanov](https://github.com/kaermorchen) created an Ember addon [ember-cli-loaders](https://github.com/kaermorchen/ember-cli-loaders) for using Loaders.css in Ember applications
- **iOS** - [ninjaprox](https://github.com/ninjaprox/NVActivityIndicatorView) and [ontovnik](https://github.com/gontovnik/DGActivityIndicatorView)
- **Android** - [Jack Wang](https://github.com/81813780/AVLoadingIndicatorView) created a library and [technofreaky](https://github.com/technofreaky/Loaders.CSS-Android-App) created an app
### Licence
The MIT License (MIT)
Copyright (c) 2016 Connor Atherton
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: bower.json
================================================
{
"name": "loaders.css",
"authors": [
"Connor Atherton <c.liam.atherton@gmail.com>"
],
"description": "Delightful and performant pure css loading animations.",
"main": "loaders.css",
"keywords": [
"loader",
"animations",
"css"
],
"license": "MIT",
"homepage": "https://github.com/ConnorAtherton/loaders.css",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
================================================
FILE: demo/demo.css
================================================
/**
*
*
*/
html,
body {
padding: 0;
margin: 0;
height: 100%;
font-size: 16px;
background: #ed5565;
color: #fff;
font-family: 'Source Sans Pro'; }
h1 {
font-size: 2.8em;
font-weight: 700;
letter-spacing: -1px;
margin: 0.6rem 0; }
h1 > span {
font-weight: 300; }
h2 {
font-size: 1.15em;
font-weight: 300;
margin: 0.3rem 0; }
main {
width: 95%;
max-width: 1000px;
margin: 4em auto;
opacity: 0; }
main.loaded {
transition: opacity .25s linear;
opacity: 1; }
main header {
width: 100%; }
main header > div {
width: 50%; }
main header > .left,
main header > .right {
height: 100%; }
main .loaders {
width: 100%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap; }
main .loaders .loader {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;
max-width: 25%;
height: 200px;
align-items: center;
justify-content: center;
perspective: 500px; }
main .loaders .loader .tooltip {
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
-webkit-transform-origin: 0 10px;
transform-origin: 0 10px;
background-color: #fff;
border-radius: 4px;
color: #2f2f2f;
display: block;
font-size: 14px;
line-height: 1;
left: 50%;
opacity: 0;
padding: 4px 20px;
position: absolute;
text-align: left;
top: 80%;
pointer-events: none;
white-space: nowrap; }
main .loaders .loader .tooltip:before {
border: 6px solid;
border-color: transparent;
border-bottom-color: #fff;
content: ' ';
display: block;
height: 0;
left: 50%;
margin-left: -10px;
position: absolute;
top: -12px;
width: 0; }
main .loaders .loader .tooltip:after {
content: ' ';
display: block;
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 20px; }
main .loaders .loader .tooltip:hover {
-webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
transform: rotateX(0deg) translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto; }
main .loaders .loader:hover .tooltip {
-webkit-transform: translate3d(-50%, -10%, 0);
transform: translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto; }
/**
* Util classes
*/
.left {
float: left; }
.right {
float: right; }
.cf, main header {
content: "";
display: table;
clear: both; }
/**
* Buttons
*/
.btn {
color: #fff;
padding: .75rem 1.25rem;
border: 2px solid #fff;
border-radius: 4px;
text-decoration: none;
transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;
margin: 2rem 0; }
.btn:hover {
transform: scale(1.01562);
background-color: #fff;
color: #ed5565; }
================================================
FILE: demo/demo.html
================================================
<!DOCTYPE html5>
<head>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="../loaders.css"/>
</head>
<body>
<main>
<header>
<div class="left">
<h1>Loaders<span>.css</span></h1>
<h2>Delightful and performance-focused pure css loading animations.</h2>
</div>
<div class="right"><a href="https://github.com/ConnorAtherton/loaders.css" class="btn right">View on Github</a></div>
</header>
<div class="loaders">
<div class="loader">
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-grid-pulse">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-grid-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate">
<div></div>
</div><span class="tooltip">
<p>ball-clip-rotate</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-pulse">
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-clip-rotate-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner square-spin">
<div></div>
</div><span class="tooltip">
<p>square-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-multiple">
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-clip-rotate-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-rise">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-pulse-rise</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-rotate">
<div></div>
</div><span class="tooltip">
<p>ball-rotate</p></span>
</div>
<div class="loader">
<div class="loader-inner cube-transition">
<div></div>
<div></div>
</div><span class="tooltip">
<p>cube-transition</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag">
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-zig-zag</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag-deflect">
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-zig-zag-deflect</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-triangle-path">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-triangle-path</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale">
<div></div>
</div><span class="tooltip">
<p>ball-scale</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>line-scale</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-party">
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>line-scale-party</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-scale-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-sync">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-pulse-sync</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-beat</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>line-scale-pulse-out</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out-rapid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>line-scale-pulse-out-rapid</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple">
<div></div>
</div><span class="tooltip">
<p>ball-scale-ripple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple-multiple">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-scale-ripple-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-spin-fade-loader</p></span>
</div>
<div class="loader">
<div class="loader-inner line-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>line-spin-fade-loader</p></span>
</div>
<div class="loader">
<div class="loader-inner triangle-skew-spin">
<div></div>
</div><span class="tooltip">
<p>triangle-skew-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>pacman</p></span>
</div>
<div class="loader">
<div class="loader-inner semi-circle-spin">
<div></div>
</div><span class="tooltip">
<p>semi-circle-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-grid-beat">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-grid-beat</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-random">
<div></div>
<div></div>
<div></div>
</div><span class="tooltip">
<p>ball-scale-random</p></span>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('main').className += 'loaded';
});
</script>
</body>
================================================
FILE: demo/src/demo.jade
================================================
doctype html5
head
link(href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300' rel='stylesheet' type='text/css')
link(rel="stylesheet", type="text/css", href="demo.css")
link(rel="stylesheet", type="text/css", href="../loaders.css")
body
main
header
.left
h1 Loaders
span .css
h2 Delightful and performance-focused pure css loading animations.
.right
a.btn.right(href="https://github.com/ConnorAtherton/loaders.css")
| View on Github
.loaders
.loader
.loader-inner.ball-pulse
div
div
div
span.tooltip
p ball-pulse
.loader
.loader-inner.ball-grid-pulse
div
div
div
div
div
div
div
div
div
span.tooltip
p ball-grid-pulse
.loader
.loader-inner.ball-clip-rotate
div
span.tooltip
p ball-clip-rotate
.loader
.loader-inner.ball-clip-rotate-pulse
div
div
span.tooltip
p ball-clip-rotate-pulse
.loader
.loader-inner.square-spin
div
span.tooltip
p square-spin
.loader
.loader-inner.ball-clip-rotate-multiple
div
div
span.tooltip
p ball-clip-rotate-multiple
.loader
.loader-inner.ball-pulse-rise
div
div
div
div
div
span.tooltip
p ball-pulse-rise
.loader
.loader-inner.ball-rotate
div
span.tooltip
p ball-rotate
.loader
.loader-inner.cube-transition
div
div
span.tooltip
p cube-transition
.loader
.loader-inner.ball-zig-zag
div
div
span.tooltip
p ball-zig-zag
.loader
.loader-inner.ball-zig-zag-deflect
div
div
span.tooltip
p ball-zig-zag-deflect
.loader
.loader-inner.ball-triangle-path
div
div
div
span.tooltip
p ball-triangle-path
.loader
.loader-inner.ball-scale
div
span.tooltip
p ball-scale
.loader
.loader-inner.line-scale
div
div
div
div
div
span.tooltip
p line-scale
.loader
.loader-inner.line-scale-party
div
div
div
div
span.tooltip
p line-scale-party
.loader
.loader-inner.ball-scale-multiple
div
div
div
span.tooltip
p ball-scale-multiple
.loader
.loader-inner.ball-pulse-sync
div
div
div
span.tooltip
p ball-pulse-sync
.loader
.loader-inner.ball-beat
div
div
div
span.tooltip
p ball-beat
.loader
.loader-inner.line-scale-pulse-out
div
div
div
div
div
span.tooltip
p line-scale-pulse-out
.loader
.loader-inner.line-scale-pulse-out-rapid
div
div
div
div
div
span.tooltip
p line-scale-pulse-out-rapid
.loader
.loader-inner.ball-scale-ripple
div
span.tooltip
p ball-scale-ripple
.loader
.loader-inner.ball-scale-ripple-multiple
div
div
div
span.tooltip
p ball-scale-ripple-multiple
.loader
.loader-inner.ball-spin-fade-loader
div
div
div
div
div
div
div
div
span.tooltip
p ball-spin-fade-loader
.loader
.loader-inner.line-spin-fade-loader
div
div
div
div
div
div
div
div
span.tooltip
p line-spin-fade-loader
.loader
.loader-inner.triangle-skew-spin
div
span.tooltip
p triangle-skew-spin
.loader
.loader-inner.pacman
div
div
div
div
div
span.tooltip
p pacman
.loader
.loader-inner.semi-circle-spin
div
span.tooltip
p semi-circle-spin
.loader
.loader-inner.ball-grid-beat
div
div
div
div
div
div
div
div
div
span.tooltip
p ball-grid-beat
.loader
.loader-inner.ball-scale-random
div
div
div
span.tooltip
p ball-scale-random
script.
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('main').className += 'loaded';
});
================================================
FILE: demo/src/demo.scss
================================================
/**
*
*
*/
$gray: #dcdcdc;
$text: #fff;
$bg-color: #ed5565;
html,
body {
padding: 0;
margin: 0;
height: 100%;
font-size: 16px;
background: $bg-color;
color: $text;
font-family: 'Source Sans Pro';
}
h1 {
font-size: 2.8em;
font-weight: 700;
letter-spacing: -1px;
margin: 0.6rem 0;
> span {
font-weight: 300;
}
}
h2 {
font-size: 1.15em;
font-weight: 300;
margin: 0.3rem 0;
}
main {
width: 95%;
max-width: 1000px;
margin: 4em auto;
opacity: 0;
&.loaded {
transition: opacity .25s linear;
opacity: 1;
}
header {
@extend .cf;
width: 100%;
> div {
width: 50%;
}
> .left,
> .right {
height: 100%;
}
}
.loaders {
width: 100%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
.loader {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;
max-width: 25%;
height: 200px;
align-items: center;
justify-content: center;
perspective: 500px;
.tooltip {
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
-webkit-transform-origin: 0 10px;
transform-origin: 0 10px;
background-color: #fff;
border-radius: 4px;
color: #2f2f2f;
display: block;
font-size: 14px;
line-height: 1;
left: 50%;
opacity: 0;
padding: 4px 20px;
position: absolute;
text-align: left;
top: 80%;
pointer-events: none;
white-space: nowrap;
&:before {
border: 6px solid;
border-color: transparent;
border-bottom-color: #fff;
content: ' ';
display: block;
height: 0;
left: 50%;
margin-left: -10px;
position: absolute;
top: -12px;
width: 0;
}
&:after {
content: ' ';
display: block;
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 20px;
}
&:hover {
-webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
transform: rotateX(0deg) translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto;
}
}
&:hover .tooltip {
-webkit-transform: translate3d(-50%, -10%, 0);
transform: translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto;
}
}
}
}
/**
* Util classes
*/
.left {
float: left;
}
.right {
float: right;
}
.cf {
content: "";
display: table;
clear: both;
}
/**
* Buttons
*/
.btn {
color: $text;
padding: .75rem 1.25rem;
border: 2px solid $text;
border-radius: 4px;
text-decoration: none;
transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;
margin: 2rem 0;
&:hover {
transform: scale(1.01562);
background-color: #fff;
color: $bg-color;
}
}
================================================
FILE: loaders.css
================================================
/**
* Copyright (c) 2016 Connor Atherton
*
* All animations must live in their own file
* in the animations directory and be included
* here.
*
*/
/**
* Styles shared by multiple animations
*/
/**
* Dots
*/
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.ball-pulse-sync > div:nth-child(1) {
-webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {
-webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {
-webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }
.ball-pulse-sync > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes ball-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes ball-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.ball-scale > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
height: 60px;
width: 60px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out infinite; }
@keyframes ball-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.ball-scale > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
height: 60px;
width: 60px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out infinite; }
.ball-scale-random {
width: 37px;
height: 40px; }
.ball-scale-random > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
display: inline-block;
height: 30px;
width: 30px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out infinite; }
.ball-scale-random > div:nth-child(1) {
margin-left: -7px;
-webkit-animation: ball-scale 1s 0.2s ease-in-out infinite;
animation: ball-scale 1s 0.2s ease-in-out infinite; }
.ball-scale-random > div:nth-child(3) {
margin-left: -2px;
margin-top: 9px;
-webkit-animation: ball-scale 1s 0.5s ease-in-out infinite;
animation: ball-scale 1s 0.5s ease-in-out infinite; }
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.ball-rotate {
position: relative; }
.ball-rotate > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: relative; }
.ball-rotate > div:first-child {
-webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }
.ball-rotate > div:before, .ball-rotate > div:after {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
content: "";
position: absolute;
opacity: 0.8; }
.ball-rotate > div:before {
top: 0px;
left: -28px; }
.ball-rotate > div:after {
top: 0px;
left: 25px; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.ball-clip-rotate > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid #fff;
border-bottom-color: transparent;
height: 26px;
width: 26px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
@keyframes scale {
30% {
-webkit-transform: scale(0.3);
transform: scale(0.3); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-clip-rotate-pulse {
position: relative;
-webkit-transform: translateY(-15px);
transform: translateY(-15px); }
.ball-clip-rotate-pulse > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%; }
.ball-clip-rotate-pulse > div:first-child {
background: #fff;
height: 16px;
width: 16px;
top: 7px;
left: -7px;
-webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
.ball-clip-rotate-pulse > div:last-child {
position: absolute;
border: 2px solid #fff;
width: 30px;
height: 30px;
left: -16px;
top: -2px;
background: transparent;
border: 2px solid;
border-color: #fff transparent #fff transparent;
-webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
.ball-clip-rotate-multiple {
position: relative; }
.ball-clip-rotate-multiple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
left: -20px;
top: -20px;
border: 2px solid #fff;
border-bottom-color: transparent;
border-top-color: transparent;
border-radius: 100%;
height: 35px;
width: 35px;
-webkit-animation: rotate 1s 0s ease-in-out infinite;
animation: rotate 1s 0s ease-in-out infinite; }
.ball-clip-rotate-multiple > div:last-child {
display: inline-block;
top: -10px;
left: -10px;
width: 15px;
height: 15px;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
border-color: #fff transparent #fff transparent;
-webkit-animation-direction: reverse;
animation-direction: reverse; }
@-webkit-keyframes ball-scale-ripple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
@keyframes ball-scale-ripple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
.ball-scale-ripple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
height: 50px;
width: 50px;
border-radius: 100%;
border: 2px solid #fff;
-webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }
@-webkit-keyframes ball-scale-ripple-multiple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
@keyframes ball-scale-ripple-multiple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
.ball-scale-ripple-multiple {
position: relative;
-webkit-transform: translateY(-25px);
transform: translateY(-25px); }
.ball-scale-ripple-multiple > div:nth-child(0) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.ball-scale-ripple-multiple > div:nth-child(1) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.ball-scale-ripple-multiple > div:nth-child(2) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.ball-scale-ripple-multiple > div:nth-child(3) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.ball-scale-ripple-multiple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: -2px;
left: -26px;
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid #fff;
-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }
@-webkit-keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-beat > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-beat 0.7s 0s infinite linear;
animation: ball-beat 0.7s 0s infinite linear; }
.ball-beat > div:nth-child(2n-1) {
-webkit-animation-delay: -0.35s !important;
animation-delay: -0.35s !important; }
@-webkit-keyframes ball-scale-multiple {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
5% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes ball-scale-multiple {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
5% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.ball-scale-multiple {
position: relative;
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
.ball-scale-multiple > div:nth-child(2) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.ball-scale-multiple > div:nth-child(3) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.ball-scale-multiple > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
left: -30px;
top: 0px;
opacity: 0;
margin: 0;
width: 60px;
height: 60px;
-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
animation: ball-scale-multiple 1s 0s linear infinite; }
@-webkit-keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px); }
66% {
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px); }
66% {
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-3 {
33% {
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px); }
66% {
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-3 {
33% {
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px); }
66% {
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
.ball-triangle-path {
position: relative;
-webkit-transform: translate(-29.994px, -37.50938px);
transform: translate(-29.994px, -37.50938px); }
.ball-triangle-path > div:nth-child(1) {
-webkit-animation-name: ball-triangle-path-1;
animation-name: ball-triangle-path-1;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(2) {
-webkit-animation-name: ball-triangle-path-2;
animation-name: ball-triangle-path-2;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(3) {
-webkit-animation-name: ball-triangle-path-3;
animation-name: ball-triangle-path-3;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid #fff; }
.ball-triangle-path > div:nth-of-type(1) {
top: 50px; }
.ball-triangle-path > div:nth-of-type(2) {
left: 25px; }
.ball-triangle-path > div:nth-of-type(3) {
top: 50px;
left: 50px; }
@-webkit-keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
25% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
25% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(0.75);
transform: scale(0.75); } }
@keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(0.75);
transform: scale(0.75); } }
.ball-pulse-rise > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
.ball-pulse-rise > div:nth-child(2n) {
-webkit-animation-name: ball-pulse-rise-even;
animation-name: ball-pulse-rise-even; }
.ball-pulse-rise > div:nth-child(2n-1) {
-webkit-animation-name: ball-pulse-rise-odd;
animation-name: ball-pulse-rise-odd; }
@-webkit-keyframes ball-grid-beat {
50% {
opacity: 0.7; }
100% {
opacity: 1; } }
@keyframes ball-grid-beat {
50% {
opacity: 0.7; }
100% {
opacity: 1; } }
.ball-grid-beat {
width: 57px; }
.ball-grid-beat > div:nth-child(1) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
-webkit-animation-duration: 1.45s;
animation-duration: 1.45s; }
.ball-grid-beat > div:nth-child(2) {
-webkit-animation-delay: -0.02s;
animation-delay: -0.02s;
-webkit-animation-duration: 0.97s;
animation-duration: 0.97s; }
.ball-grid-beat > div:nth-child(3) {
-webkit-animation-delay: 0.66s;
animation-delay: 0.66s;
-webkit-animation-duration: 1.23s;
animation-duration: 1.23s; }
.ball-grid-beat > div:nth-child(4) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
-webkit-animation-duration: 1.24s;
animation-duration: 1.24s; }
.ball-grid-beat > div:nth-child(5) {
-webkit-animation-delay: -0.19s;
animation-delay: -0.19s;
-webkit-animation-duration: 1.13s;
animation-duration: 1.13s; }
.ball-grid-beat > div:nth-child(6) {
-webkit-animation-delay: 0.69s;
animation-delay: 0.69s;
-webkit-animation-duration: 1.42s;
animation-duration: 1.42s; }
.ball-grid-beat > div:nth-child(7) {
-webkit-animation-delay: 0.58s;
animation-delay: 0.58s;
-webkit-animation-duration: 1.14s;
animation-duration: 1.14s; }
.ball-grid-beat > div:nth-child(8) {
-webkit-animation-delay: 0.21s;
animation-delay: 0.21s;
-webkit-animation-duration: 1.17s;
animation-duration: 1.17s; }
.ball-grid-beat > div:nth-child(9) {
-webkit-animation-delay: -0.18s;
animation-delay: -0.18s;
-webkit-animation-duration: 0.65s;
animation-duration: 0.65s; }
.ball-grid-beat > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-beat;
animation-name: ball-grid-beat;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
.ball-grid-pulse {
width: 57px; }
.ball-grid-pulse > div:nth-child(1) {
-webkit-animation-delay: 0.22s;
animation-delay: 0.22s;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s; }
.ball-grid-pulse > div:nth-child(2) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
-webkit-animation-duration: 1s;
animation-duration: 1s; }
.ball-grid-pulse > div:nth-child(3) {
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
-webkit-animation-duration: 0.63s;
animation-duration: 0.63s; }
.ball-grid-pulse > div:nth-child(4) {
-webkit-animation-delay: -0.03s;
animation-delay: -0.03s;
-webkit-animation-duration: 1.24s;
animation-duration: 1.24s; }
.ball-grid-pulse > div:nth-child(5) {
-webkit-animation-delay: 0.08s;
animation-delay: 0.08s;
-webkit-animation-duration: 1.37s;
animation-duration: 1.37s; }
.ball-grid-pulse > div:nth-child(6) {
-webkit-animation-delay: 0.43s;
animation-delay: 0.43s;
-webkit-animation-duration: 1.55s;
animation-duration: 1.55s; }
.ball-grid-pulse > div:nth-child(7) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s; }
.ball-grid-pulse > div:nth-child(8) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-duration: 0.97s;
animation-duration: 0.97s; }
.ball-grid-pulse > div:nth-child(9) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-duration: 0.63s;
animation-duration: 0.63s; }
.ball-grid-pulse > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-pulse;
animation-name: ball-grid-pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-spin-fade-loader {
position: relative;
top: -10px;
left: -10px; }
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
.ball-spin-fade-loader > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
@-webkit-keyframes ball-spin-loader {
75% {
opacity: 0.2; }
100% {
opacity: 1; } }
@keyframes ball-spin-loader {
75% {
opacity: 0.2; }
100% {
opacity: 1; } }
.ball-spin-loader {
position: relative; }
.ball-spin-loader > span:nth-child(1) {
top: 45px;
left: 0;
-webkit-animation: ball-spin-loader 2s 0.9s infinite linear;
animation: ball-spin-loader 2s 0.9s infinite linear; }
.ball-spin-loader > span:nth-child(2) {
top: 30.68182px;
left: 30.68182px;
-webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
animation: ball-spin-loader 2s 1.8s infinite linear; }
.ball-spin-loader > span:nth-child(3) {
top: 0;
left: 45px;
-webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
animation: ball-spin-loader 2s 2.7s infinite linear; }
.ball-spin-loader > span:nth-child(4) {
top: -30.68182px;
left: 30.68182px;
-webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
animation: ball-spin-loader 2s 3.6s infinite linear; }
.ball-spin-loader > span:nth-child(5) {
top: -45px;
left: 0;
-webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
animation: ball-spin-loader 2s 4.5s infinite linear; }
.ball-spin-loader > span:nth-child(6) {
top: -30.68182px;
left: -30.68182px;
-webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
animation: ball-spin-loader 2s 5.4s infinite linear; }
.ball-spin-loader > span:nth-child(7) {
top: 0;
left: -45px;
-webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
animation: ball-spin-loader 2s 6.3s infinite linear; }
.ball-spin-loader > span:nth-child(8) {
top: 30.68182px;
left: -30.68182px;
-webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
animation: ball-spin-loader 2s 7.2s infinite linear; }
.ball-spin-loader > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 15px;
height: 15px;
border-radius: 100%;
background: green; }
@-webkit-keyframes ball-zig {
33% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
66% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zig {
33% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
66% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@-webkit-keyframes ball-zag {
33% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
66% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zag {
33% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
66% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
.ball-zig-zag {
position: relative;
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px); }
.ball-zig-zag > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
margin-left: 15px;
top: 4px;
left: -7px; }
.ball-zig-zag > div:first-child {
-webkit-animation: ball-zig 0.7s 0s infinite linear;
animation: ball-zig 0.7s 0s infinite linear; }
.ball-zig-zag > div:last-child {
-webkit-animation: ball-zag 0.7s 0s infinite linear;
animation: ball-zag 0.7s 0s infinite linear; }
@-webkit-keyframes ball-zig-deflect {
17% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
34% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
84% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zig-deflect {
17% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
34% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
84% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@-webkit-keyframes ball-zag-deflect {
17% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
34% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
84% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zag-deflect {
17% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
34% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
84% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
.ball-zig-zag-deflect {
position: relative;
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px); }
.ball-zig-zag-deflect > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
margin-left: 15px;
top: 4px;
left: -7px; }
.ball-zig-zag-deflect > div:first-child {
-webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
animation: ball-zig-deflect 1.5s 0s infinite linear; }
.ball-zig-zag-deflect > div:last-child {
-webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
animation: ball-zag-deflect 1.5s 0s infinite linear; }
/**
* Lines
*/
@-webkit-keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale > div:nth-child(1) {
-webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(2) {
-webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(3) {
-webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(4) {
-webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(5) {
-webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes line-scale-party {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes line-scale-party {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.line-scale-party > div:nth-child(1) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
-webkit-animation-duration: 0.54s;
animation-duration: 0.54s; }
.line-scale-party > div:nth-child(2) {
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
-webkit-animation-duration: 1.15s;
animation-duration: 1.15s; }
.line-scale-party > div:nth-child(3) {
-webkit-animation-delay: 0.04s;
animation-delay: 0.04s;
-webkit-animation-duration: 0.77s;
animation-duration: 0.77s; }
.line-scale-party > div:nth-child(4) {
-webkit-animation-delay: -0.12s;
animation-delay: -0.12s;
-webkit-animation-duration: 0.61s;
animation-duration: 0.61s; }
.line-scale-party > div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation-name: line-scale-party;
animation-name: line-scale-party;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes line-scale-pulse-out {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale-pulse-out {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale-pulse-out > div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
-webkit-animation-delay: -0.4s !important;
animation-delay: -0.4s !important; }
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
-webkit-animation-delay: -0.2s !important;
animation-delay: -0.2s !important; }
@-webkit-keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); }
90% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); }
90% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale-pulse-out-rapid > div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
vertical-align: middle;
-webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }
.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
-webkit-animation-delay: -0.25s !important;
animation-delay: -0.25s !important; }
.line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important; }
@-webkit-keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
@keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
.line-spin-fade-loader {
position: relative;
top: -10px;
left: -4px; }
.line-spin-fade-loader > div:nth-child(1) {
top: 20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(2) {
top: 13.63636px;
left: 13.63636px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(4) {
top: -13.63636px;
left: 13.63636px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(5) {
top: -20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(6) {
top: -13.63636px;
left: -13.63636px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(8) {
top: 13.63636px;
left: -13.63636px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }
.line-spin-fade-loader > div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 5px;
height: 15px; }
/**
* Misc
*/
@-webkit-keyframes triangle-skew-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
@keyframes triangle-skew-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
.triangle-skew-spin > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
-webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
@-webkit-keyframes square-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
@keyframes square-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
.square-spin > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #fff;
-webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
@-webkit-keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); } }
@keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); } }
@-webkit-keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }
@keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
@keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
.pacman {
position: relative; }
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s -0.99s infinite linear;
animation: pacman-balls 1s -0.99s infinite linear; }
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s -0.66s infinite linear;
animation: pacman-balls 1s -0.66s infinite linear; }
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s -0.33s infinite linear;
animation: pacman-balls 1s -0.33s infinite linear; }
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
animation: rotate_pacman_half_up 0.5s 0s infinite;
position: relative;
left: -30px; }
.pacman > div:nth-child(2) {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -50px;
position: relative;
left: -30px; }
.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6) {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 70px; }
@-webkit-keyframes cube-transition {
25% {
-webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
transform: translateX(50px) scale(0.5) rotate(-90deg); }
50% {
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg); }
75% {
-webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
transform: translateY(50px) scale(0.5) rotate(-270deg); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
@keyframes cube-transition {
25% {
-webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
transform: translateX(50px) scale(0.5) rotate(-90deg); }
50% {
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg); }
75% {
-webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
transform: translateY(50px) scale(0.5) rotate(-270deg); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
.cube-transition {
position: relative;
-webkit-transform: translate(-25px, -25px);
transform: translate(-25px, -25px); }
.cube-transition > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 10px;
height: 10px;
position: absolute;
top: -5px;
left: -5px;
background-color: #fff;
-webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
animation: cube-transition 1.6s 0s infinite ease-in-out; }
.cube-transition > div:last-child {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
@-webkit-keyframes spin-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.semi-circle-spin {
position: relative;
width: 35px;
height: 35px;
overflow: hidden; }
.semi-circle-spin > div {
position: absolute;
border-width: 0px;
border-radius: 100%;
-webkit-animation: spin-rotate 0.6s 0s infinite linear;
animation: spin-rotate 0.6s 0s infinite linear;
background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);
width: 100%;
height: 100%; }
================================================
FILE: loaders.css.js
================================================
(function ($) {
var divs = {
'ball-pulse': 3,
'ball-grid-pulse': 9,
'ball-clip-rotate': 1,
'ball-clip-rotate-pulse': 2,
'square-spin': 1,
'ball-clip-rotate-multiple': 2,
'ball-pulse-rise': 5,
'ball-rotate': 1,
'cube-transition': 2,
'ball-zig-zag': 2,
'ball-zig-zag-deflect': 2,
'ball-triangle-path': 3,
'ball-scale': 1,
'line-scale': 5,
'line-scale-party': 4,
'ball-scale-multiple': 3,
'ball-pulse-sync': 3,
'ball-beat': 3,
'line-scale-pulse-out': 5,
'line-scale-pulse-out-rapid': 5,
'ball-scale-ripple': 1,
'ball-scale-ripple-multiple': 3,
'ball-spin-fade-loader': 8,
'line-spin-fade-loader': 8,
'triangle-skew-spin': 1,
'pacman': 5,
'ball-grid-beat': 9,
'semi-circle-spin': 1,
'ball-scale-random': 3
};
var addDivs = function(n) {
var arr = [];
for (i = 1; i <= n; i++) {
arr.push('<div></div>');
}
return arr;
};
$.fn.loaders = function() {
return this.each(function() {
var elem = $(this);
$.each(divs, function(key, value) {
if (elem.hasClass(key))
elem.html(addDivs(value))
})
});
};
$(function() {
$.each(divs, function(key, value) {
$('.loader-inner.' + key).html(addDivs(value));
})
});
}).call(window, window.$ || window.jQuery || window.Zepto);
================================================
FILE: package.json
================================================
{
"name": "loaders.css",
"version": "0.1.2",
"description": "Loading animations in pure css",
"main": "loaders.css",
"style": "loaders.css",
"repository": {
"type": "git",
"url": "git@github.com:ConnorAtherton/loaders.css.git"
},
"keywords": [
"css",
"loaders",
"animation",
"animate"
],
"author": "Connor Atherton",
"license": "MIT",
"bugs": {
"url": "https://github.com/ConnorAtherton/loaders.css/issues"
},
"homepage": "https://github.com/ConnorAtherton/loaders.css",
"devDependencies": {
"coffee-script": "^1.9.1",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-cssmin": "^0.1.6",
"gulp-jade": "^0.10.0",
"gulp-plumber": "1.0.1",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.1.1",
"gulp-util": "^3.0.3",
"scss-lint": "0.0.0"
}
}
================================================
FILE: src/_functions.scss
================================================
@function delay($interval, $count, $index) {
@return ($index * $interval) - ($interval * $count);
}
================================================
FILE: src/_mixins.scss
================================================
@mixin global-bg() {
background-color: $primary-color;
}
@mixin global-animation() {
animation-fill-mode: both;
}
@mixin balls() {
@include global-bg();
width: $ball-size;
height: $ball-size;
border-radius: 100%;
margin: $margin;
}
@mixin lines() {
@include global-bg();
width: $line-width;
height: $line-height;
border-radius: 2px;
margin: $margin;
}
================================================
FILE: src/_variables.scss
================================================
$primary-color: #fff !default;
$ball-size: 15px !default;
$margin: 2px !default;
$line-height: 35px !default;
$line-width: 4px !default;
================================================
FILE: src/animations/ball-beat.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-beat {
50% {
opacity: 0.2;
transform: scale(0.75);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.ball-beat {
> div {
@include balls();
@include global-animation();
display: inline-block;
animation: ball-beat 0.7s 0s infinite linear;
&:nth-child(2n-1) {
animation-delay: -0.35s !important;
}
}
}
================================================
FILE: src/animations/ball-clip-rotate-multiple.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.ball-clip-rotate-multiple {
position: relative;
> div {
@include global-animation();
position: absolute;
left: -20px;
top: -20px;
border: 2px solid $primary-color;
border-bottom-color: transparent;
border-top-color: transparent;
border-radius: 100%;
height: 35px;
width: 35px;
animation: rotate 1s 0s ease-in-out infinite;
&:last-child {
display: inline-block;
top: -10px;
left: -10px;
width: 15px;
height: 15px;
animation-duration: 0.5s;
border-color: $primary-color transparent $primary-color transparent;
animation-direction: reverse;
}
}
}
================================================
FILE: src/animations/ball-clip-rotate-pulse.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes scale {
30% {
transform: scale(0.3);
}
100% {
transform: scale(1);
}
}
.ball-clip-rotate-pulse {
position: relative;
transform: translateY(-15px);
> div {
@include global-animation();
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
&:first-child {
background: $primary-color;
height: 16px;
width: 16px;
top: 7px;
left: -7px;
animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
}
&:last-child {
position: absolute;
border: 2px solid $primary-color;
width: 30px;
height: 30px;
left: -16px;
top: -2px;
background: transparent;
border: 2px solid;
border-color: $primary-color transparent $primary-color transparent;
animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
animation-duration: 1s;
}
}
}
================================================
FILE: src/animations/ball-clip-rotate.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.ball-clip-rotate {
> div {
@include balls();
@include global-animation();
border: 2px solid $primary-color;
border-bottom-color: transparent;
height: 26px;
width: 26px;
background: transparent !important;
display: inline-block;
animation: rotate 0.75s 0s linear infinite;
}
}
================================================
FILE: src/animations/ball-grid-beat.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-grid-beat {
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@mixin ball-grid-beat($n:9) {
@for $i from 1 through $n {
> div:nth-child(#{$i}) {
animation-delay: ((random(100) / 100) - 0.2) + s;
animation-duration: ((random(100) / 100) + 0.6) + s;
}
}
}
.ball-grid-beat {
@include ball-grid-beat();
width: ($ball-size * 3) + $margin * 6;
> div {
@include balls();
@include global-animation();
display: inline-block;
float: left;
animation-name: ball-grid-beat;
animation-iteration-count: infinite;
animation-delay: 0;
}
}
================================================
FILE: src/animations/ball-grid-pulse.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-grid-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@mixin ball-grid-pulse($n:9) {
@for $i from 1 through $n {
> div:nth-child(#{$i}) {
animation-delay: ((random(100) / 100) - 0.2) + s;
animation-duration: ((random(100) / 100) + 0.6) + s;
}
}
}
.ball-grid-pulse {
@include ball-grid-pulse();
width: ($ball-size * 3) + $margin * 6;
> div {
@include balls();
@include global-animation();
display: inline-block;
float: left;
animation-name: ball-grid-pulse;
animation-iteration-count: infinite;
animation-delay: 0;
}
}
================================================
FILE: src/animations/ball-pulse-rise.scss
================================================
@import '../variables';
@import '../mixins';
$rise-amount: 30px;
@keyframes ball-pulse-rise-even {
0% {
transform: scale(1.1);
}
25% {
transform: translateY(-$rise-amount);
}
50% {
transform: scale(0.4);
}
75% {
transform: translateY($rise-amount);
}
100% {
transform: translateY(0);
transform: scale(1.0);
}
}
@keyframes ball-pulse-rise-odd {
0% {
transform: scale(0.4);
}
25% {
transform: translateY($rise-amount);
}
50% {
transform: scale(1.1);
}
75% {
transform: translateY(-$rise-amount);
}
100% {
transform: translateY(0);
transform: scale(0.75);
}
}
.ball-pulse-rise {
> div {
@include balls();
@include global-animation();
display: inline-block;
animation-duration: 1s;
animation-timing-function: cubic-bezier(.15,.46,.9,.6);
animation-iteration-count: infinite;
animation-delay: 0;
&:nth-child(2n) {
animation-name: ball-pulse-rise-even;
}
&:nth-child(2n-1) {
animation-name: ball-pulse-rise-odd;
}
}
}
================================================
FILE: src/animations/ball-pulse-round.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-pulse-round {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.ball-pulse-round {
> div {
@include global-animation();
width: 10px;
height: 10px;
animation: ball-pulse-round 1.2s infinite ease-in-out;
}
}
================================================
FILE: src/animations/ball-pulse-sync.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$amount: 10px;
@keyframes ball-pulse-sync {
33% {
transform: translateY($amount);
}
66% {
transform: translateY(-$amount);
}
100% {
transform: translateY(0);
}
}
@mixin ball-pulse-sync($n: 3, $start: 1) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation: ball-pulse-sync 0.6s delay(0.07s, $n, $i) infinite ease-in-out;
}
}
}
.ball-pulse-sync {
@include ball-pulse-sync();
> div {
@include balls();
@include global-animation();
display: inline-block;
}
}
================================================
FILE: src/animations/ball-pulse.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
@keyframes scale {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(0.1);
opacity: 0.7;
}
80% {
transform: scale(1);
opacity: 1;
}
}
// mixins should be separated out
@mixin ball-pulse($n: 3, $start: 1) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation: scale 0.75s delay(0.12s, $n, $i) infinite cubic-bezier(.2,.68,.18,1.08);
}
}
}
.ball-pulse {
@include ball-pulse();
> div {
@include balls();
@include global-animation();
display: inline-block;
}
}
================================================
FILE: src/animations/ball-rotate.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.ball-rotate {
position: relative;
> div {
@include balls();
@include global-animation();
position: relative;
&:first-child {
animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;
}
&:before, &:after {
@include balls();
content: "";
position: absolute;
opacity: 0.8;
}
&:before {
top: 0px;
left: -28px;
}
&:after {
top: 0px;
left: 25px;
}
}
}
================================================
FILE: src/animations/ball-scale-multiple.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$size: 60px;
@keyframes ball-scale-multiple {
0% {
transform: scale(0.0);
opacity: 0;
}
5% {
opacity: 1;
}
100% {
transform: scale(1.0);
opacity: 0;
}
}
@mixin ball-scale-multiple ($n: 3, $start: 2) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation-delay: delay(0.2s, $n, $i - 1);
}
}
}
.ball-scale-multiple {
@include ball-scale-multiple();
position: relative;
transform: translateY(-$size / 2);
> div {
@include balls();
@include global-animation();
position: absolute;
left: -30px;
top: 0px;
opacity: 0;
margin: 0;
width: $size;
height: $size;
animation: ball-scale-multiple 1s 0s linear infinite;
}
}
================================================
FILE: src/animations/ball-scale-random.scss
================================================
@import "ball-scale";
.ball-scale-random {
width: 37px;
height: 40px;
> div {
@include balls();
@include global-animation();
position: absolute;
display: inline-block;
height: 30px;
width: 30px;
animation: ball-scale 1s 0s ease-in-out infinite;
&:nth-child(1) {
margin-left: -7px;
animation: ball-scale 1s 0.2s ease-in-out infinite;
}
&:nth-child(3) {
margin-left: -2px;
margin-top: 9px;
animation: ball-scale 1s 0.5s ease-in-out infinite;
}
}
}
================================================
FILE: src/animations/ball-scale-ripple-multiple.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$size: 50px;
@keyframes ball-scale-ripple-multiple {
0% {
transform: scale(0.1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0.7;
}
100% {
opacity: 0.0;
}
}
@mixin ball-scale-ripple-multiple ($n:3, $start:0) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation-delay: delay(0.2s, $n, $i - 1);
}
}
}
.ball-scale-ripple-multiple {
@include ball-scale-ripple-multiple();
position: relative;
transform: translateY(-$size / 2);
> div {
@include global-animation();
position: absolute;
top: -2px;
left: -26px;
width: $size;
height: $size;
border-radius: 100%;
border: 2px solid $primary-color;
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
}
}
================================================
FILE: src/animations/ball-scale-ripple.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-scale-ripple {
0% {
transform: scale(0.1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0.7;
}
100% {
opacity: 0.0;
}
}
.ball-scale-ripple {
> div {
@include global-animation();
height: 50px;
width: 50px;
border-radius: 100%;
border: 2px solid $primary-color;;
animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);
}
}
================================================
FILE: src/animations/ball-scale.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes ball-scale {
0% {
transform: scale(0.0);
}
100% {
transform: scale(1.0);
opacity: 0;
}
}
.ball-scale {
> div {
@include balls();
@include global-animation();
display: inline-block;
height: 60px;
width: 60px;
animation: ball-scale 1s 0s ease-in-out infinite;
}
}
================================================
FILE: src/animations/ball-spin-fade-loader.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$radius: 25px;
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
transform: scale(0.4);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@mixin ball-spin-fade-loader($n:8, $start:1) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
$iter: 360 / $n;
$quarter: ($radius / 2) + ($radius / 5.5);
@if $i == 1 {
top: $radius;
left: 0;
} @else if $i == 2 {
top: $quarter;
left: $quarter;
} @else if $i == 3 {
top: 0;
left: $radius;
} @else if $i == 4 {
top: -$quarter;
left: $quarter;
} @else if $i == 5 {
top: -$radius;
left: 0;
} @else if $i == 6 {
top: -$quarter;
left: -$quarter;
} @else if $i == 7 {
top: 0;
left: -$radius;
} @else if $i == 8 {
top: $quarter;
left: -$quarter;
}
animation: ball-spin-fade-loader 1s delay(0.12s, $n, $i - 1) infinite linear;
}
}
}
.ball-spin-fade-loader {
@include ball-spin-fade-loader();
position: relative;
top: -10px;
left: -10px;
> div {
@include balls();
@include global-animation();
position: absolute;
}
}
================================================
FILE: src/animations/ball-spin-loader.scss
================================================
@import '../variables';
@import '../mixins';
$radius: 45px;
@keyframes ball-spin-loader {
75% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
@mixin ball-spin-loader($n:8, $start:1) {
@for $i from $start through $n {
> span:nth-child(#{$i}) {
$iter: 360 / $n;
$quarter: ($radius / 2) + ($radius / 5.5);
@if $i == 1 {
top: $radius;
left: 0;
} @else if $i == 2 {
top: $quarter;
left: $quarter;
} @else if $i == 3 {
top: 0;
left: $radius;
} @else if $i == 4 {
top: -$quarter;
left: $quarter;
} @else if $i == 5 {
top: -$radius;
left: 0;
} @else if $i == 6 {
top: -$quarter;
left: -$quarter;
} @else if $i == 7 {
top: 0;
left: -$radius;
} @else if $i == 8 {
top: $quarter;
left: -$quarter;
}
animation: ball-spin-loader 2s ($i * 0.9s) infinite linear;
}
}
}
.ball-spin-loader {
@include ball-spin-loader();
position: relative;
> div {
@include global-animation();
position: absolute;
width: 15px;
height: 15px;
border-radius: 100%;
background: green;
}
}
================================================
FILE: src/animations/ball-triangle-path.scss
================================================
@import '../variables';
@import '../mixins';
$amount: 50px;
@keyframes ball-triangle-path-1 {
33% {
transform: translate($amount / 2, -$amount);
}
66% {
transform: translate($amount, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-2 {
33% {
transform: translate($amount / 2, $amount);
}
66% {
transform: translate(- $amount / 2, $amount);
}
100% {
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-3 {
33% {
transform: translate(-$amount, 0px);
}
66% {
transform: translate(- $amount / 2, -$amount);
}
100% {
transform: translate(0px, 0px);
}
}
@mixin ball-triangle-path($n:3) {
$animations: ball-triangle-path-1 ball-triangle-path-2 ball-triangle-path-3;
@for $i from 1 through $n {
> div:nth-child(#{$i}) {
animation-name: nth($animations, $i);
animation-delay: 0;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
}
}
.ball-triangle-path {
position: relative;
@include ball-triangle-path();
transform: translate(-$amount / 1.667, -$amount / 1.333);
> div {
@include global-animation();
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid $primary-color;
&:nth-of-type(1) {
top: $amount;
}
&:nth-of-type(2) {
left: $amount / 2;
}
&:nth-of-type(3) {
top: $amount;
left: $amount;
}
}
}
================================================
FILE: src/animations/ball-zig-zag-deflect.scss
================================================
@import '../variables';
@import '../mixins';
$amount: 30px;
@keyframes ball-zig-deflect {
17% {
transform: translate(-$amount/2, -$amount);
}
34% {
transform: translate($amount/2, -$amount);
}
50% {
transform: translate(0, 0);
}
67% {
transform: translate($amount/2, -$amount);
}
84% {
transform: translate(-$amount/2, -$amount);
}
100% {
transform: translate(0, 0);
}
}
@keyframes ball-zag-deflect {
17% {
transform: translate($amount/2, $amount);
}
34% {
transform: translate(-$amount/2, $amount);
}
50% {
transform: translate(0, 0);
}
67% {
transform: translate(-$amount/2, $amount);
}
84% {
transform: translate($amount/2, $amount);
}
100% {
transform: translate(0, 0);
}
}
.ball-zig-zag-deflect {
position: relative;
transform: translate(-$amount / 2, -$amount / 2);
> div {
@include balls();
@include global-animation();
position: absolute;
margin-left: $amount / 2;
top: 4px;
left: -7px;
&:first-child {
animation: ball-zig-deflect 1.5s 0s infinite linear;
}
&:last-child {
animation: ball-zag-deflect 1.5s 0s infinite linear;
}
}
}
================================================
FILE: src/animations/ball-zig-zag.scss
================================================
@import '../variables';
@import '../mixins';
$amount: 30px;
@keyframes ball-zig {
33% {
transform: translate(-$amount/2, -$amount);
}
66% {
transform: translate($amount/2, -$amount);
}
100% {
transform: translate(0, 0);
}
}
@keyframes ball-zag {
33% {
transform: translate($amount/2, $amount);
}
66% {
transform: translate(-$amount/2, $amount);
}
100% {
transform: translate(0, 0);
}
}
.ball-zig-zag {
position: relative;
transform: translate(-$amount / 2, -$amount / 2);
> div {
@include balls();
@include global-animation();
position: absolute;
margin-left: $amount / 2;
top: 4px;
left: -7px;
&:first-child {
animation: ball-zig 0.7s 0s infinite linear;
}
&:last-child {
animation: ball-zag 0.7s 0s infinite linear;
}
}
}
================================================
FILE: src/animations/cube-transition.scss
================================================
@import '../variables';
@import '../mixins';
$amount: 50px;
$size: 10px;
@keyframes cube-transition {
25% {
transform: translateX($amount) scale(0.5) rotate(-90deg);
}
50% {
transform: translate($amount, $amount) rotate(-180deg);
}
75% {
transform: translateY($amount) scale(0.5) rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
.cube-transition {
position: relative;
transform: translate(-$amount / 2, -$amount / 2);
> div {
@include global-animation();
width: $size;
height: $size;
position: absolute;
top: -5px;
left: -5px;
background-color: $primary-color;
animation: cube-transition 1.6s 0s infinite ease-in-out;
&:last-child {
animation-delay: -0.8s
}
}
}
================================================
FILE: src/animations/line-scale-pulse-out-rapid.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes line-scale-pulse-out-rapid {
0% {
transform: scaley(1.0);
}
80% {
transform: scaley(0.3);
}
90% {
transform: scaley(1.0);
}
}
.line-scale-pulse-out-rapid {
> div {
@include lines();
@include global-animation();
display: inline-block;
vertical-align: middle;
animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(.11,.49,.38,.78);
&:nth-child(2), &:nth-child(4) {
animation-delay: -0.25s !important;
}
&:nth-child(1), &:nth-child(5) {
animation-delay: 0s !important;
}
}
}
================================================
FILE: src/animations/line-scale-pulse-out.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
@keyframes line-scale-pulse-out {
0% {
transform: scaley(1.0);
}
50% {
transform: scaley(0.4);
}
100% {
transform: scaley(1.0);
}
}
.line-scale-pulse-out {
> div {
@include lines();
@include global-animation();
display: inline-block;
animation: line-scale-pulse-out 0.9s delay(0.2s, 3, 0) infinite cubic-bezier(.85,.25,.37,.85);
&:nth-child(2), &:nth-child(4) {
animation-delay: delay(0.2s, 3, 1) !important;
}
&:nth-child(1), &:nth-child(5) {
animation-delay: delay(0.2s, 3, 2) !important;
}
}
}
================================================
FILE: src/animations/line-scale-random.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes line-scale-party {
0% {
transform: scale(1);
}
50% {
$random: 0.5;
transform: scale($random);
}
100% {
transform: scale(1);
}
}
@mixin line-scale-party($n:4) {
@for $i from 1 through $n {
> div:nth-child(#{$i}) {
animation-delay: ((random(100) / 100) - 0.2) + s;
animation-duration: ((random(100) / 100) + 0.3) + s;
}
}
}
.line-scale-party {
@include line-scale-party();
> div {
@include lines();
@include global-animation();
display: inline-block;
animation-name: line-scale-party;
animation-iteration-count: infinite;
animation-delay: 0;
}
}
================================================
FILE: src/animations/line-scale.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
@keyframes line-scale {
0% {
transform: scaley(1.0);
}
50% {
transform: scaley(0.4);
}
100% {
transform: scaley(1.0);
}
}
@mixin line-scale($n:5) {
@for $i from 1 through $n {
> div:nth-child(#{$i}) {
animation: line-scale 1s delay(0.1s, $n, $i) infinite cubic-bezier(.2,.68,.18,1.08);
}
}
}
.line-scale {
@include line-scale();
> div {
@include lines();
@include global-animation();
display: inline-block;
}
}
================================================
FILE: src/animations/line-spin-fade-loader.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$radius: 20px;
@keyframes line-spin-fade-loader {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
@mixin line-spin-fade-loader($n:8, $start:1) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
$iter: 360 / $n;
$quarter: ($radius / 2) + ($radius / 5.5);
@if $i == 1 {
top: $radius;
left: 0;
} @else if $i == 2 {
top: $quarter;
left: $quarter;
transform: rotate(-45deg);
} @else if $i == 3 {
top: 0;
left: $radius;
transform: rotate(90deg);
} @else if $i == 4 {
top: -$quarter;
left: $quarter;
transform: rotate(45deg);
} @else if $i == 5 {
top: -$radius;
left: 0;
} @else if $i == 6 {
top: -$quarter;
left: -$quarter;
transform: rotate(-45deg);
} @else if $i == 7 {
top: 0;
left: -$radius;
transform: rotate(90deg);
} @else if $i == 8 {
top: $quarter;
left: -$quarter;
transform: rotate(45deg);
}
animation: line-spin-fade-loader 1.2s delay(0.12s, $n, $i) infinite ease-in-out;
}
}
}
.line-spin-fade-loader {
@include line-spin-fade-loader();
position: relative;
top: -10px;
left: -4px;
> div {
@include lines();
@include global-animation();
position: absolute;
width: 5px;
height: 15px;
}
}
================================================
FILE: src/animations/pacman.scss
================================================
@import '../variables';
@import '../mixins';
@import '../functions';
$size: 25px;
@keyframes rotate_pacman_half_up {
0% {
transform:rotate(270deg);
}
50% {
transform:rotate(360deg);
}
100% {
transform:rotate(270deg);
}
}
@keyframes rotate_pacman_half_down {
0% {
transform:rotate(90deg);
}
50% {
transform:rotate(0deg);
}
100% {
transform:rotate(90deg);
}
}
@mixin pacman_design(){
width: 0px;
height: 0px;
border-right: $size solid transparent;
border-top: $size solid $primary-color;
border-left: $size solid $primary-color;
border-bottom: $size solid $primary-color;
border-radius: $size;
}
@keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
transform: translate(-4 * $size, -$size / 4);
}
}
@mixin ball-placement($n:3, $start:0) {
@for $i from $start through $n {
> div:nth-child(#{$i + 2}) {
animation: pacman-balls 1s delay(.33s, $n, $i) infinite linear;
}
}
}
.pacman {
@include ball-placement();
position: relative;
> div:first-of-type {
@include pacman_design();
animation: rotate_pacman_half_up 0.5s 0s infinite;
position: relative;
left: -30px;
}
> div:nth-child(2) {
@include pacman_design();
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -2 * $size;
position: relative;
left: -30px;
}
> div:nth-child(3),
> div:nth-child(4),
> div:nth-child(5),
> div:nth-child(6) {
@include balls();
width: 10px;
height: 10px;
position: absolute;
transform: translate(0, -$size / 4);
top: 25px;
left: 70px;
}
}
================================================
FILE: src/animations/semi-circle-spin.scss
================================================
@import '../variables';
@import '../mixins';
$size: 35px;
$pos: 30%;
@keyframes spin-rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.semi-circle-spin {
position: relative;
width: $size;
height: $size;
overflow: hidden;
> div {
position: absolute;
border-width: 0px;
border-radius: 100%;
animation: spin-rotate 0.6s 0s infinite linear;
background-image: linear-gradient(transparent 0%, transparent (100% - $pos), $primary-color $pos, $primary-color 100%);
width: 100%;
height: 100%;
}
}
================================================
FILE: src/animations/square-spin.scss
================================================
@import '../variables';
@import '../mixins';
@keyframes square-spin {
25% {
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50% {
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75% {
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100% {
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
.square-spin {
> div {
@include global-animation();
width: 50px;
height: 50px;
background: $primary-color;
animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
}
}
================================================
FILE: src/animations/triangle-skew-spin.scss
================================================
@import '../variables';
@import '../mixins';
$size: 20px;
@keyframes triangle-skew-spin {
25% {
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50% {
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75% {
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100% {
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
.triangle-skew-spin {
> div {
@include global-animation();
width: 0;
height: 0;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $primary-color;
animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
}
}
================================================
FILE: src/loaders.scss
================================================
/**
* Copyright (c) 2016 Connor Atherton
*
* All animations must live in their own file
* in the animations directory and be included
* here.
*
*/
/**
* Styles shared by multiple animations
*/
@import 'variables';
@import 'mixins';
/**
* Dots
*/
@import 'animations/ball-pulse';
@import 'animations/ball-pulse-sync';
@import 'animations/ball-scale';
@import 'animations/ball-scale-random';
@import 'animations/ball-rotate';
@import 'animations/ball-clip-rotate';
@import 'animations/ball-clip-rotate-pulse';
@import 'animations/ball-clip-rotate-multiple';
@import 'animations/ball-scale-ripple';
@import 'animations/ball-scale-ripple-multiple';
@import 'animations/ball-beat';
@import 'animations/ball-scale-multiple';
@import 'animations/ball-triangle-path';
@import 'animations/ball-pulse-rise';
@import 'animations/ball-grid-beat';
@import 'animations/ball-grid-pulse';
@import 'animations/ball-spin-fade-loader';
@import 'animations/ball-spin-loader';
@import 'animations/ball-zig-zag';
@import 'animations/ball-zig-zag-deflect';
/**
* Lines
*/
@import 'animations/line-scale';
@import 'animations/line-scale-random';
@import 'animations/line-scale-pulse-out';
@import 'animations/line-scale-pulse-out-rapid';
@import 'animations/line-spin-fade-loader';
/**
* Misc
*/
@import 'animations/triangle-skew-spin';
@import 'animations/square-spin';
@import 'animations/pacman';
@import 'animations/cube-transition';
@import 'animations/semi-circle-spin';
gitextract_ql7r3u9_/
├── .gitignore
├── .scss-lint.yml
├── Gulpfile.coffee
├── README.md
├── bower.json
├── demo/
│ ├── demo.css
│ ├── demo.html
│ └── src/
│ ├── demo.jade
│ └── demo.scss
├── loaders.css
├── loaders.css.js
├── package.json
└── src/
├── _functions.scss
├── _mixins.scss
├── _variables.scss
├── animations/
│ ├── ball-beat.scss
│ ├── ball-clip-rotate-multiple.scss
│ ├── ball-clip-rotate-pulse.scss
│ ├── ball-clip-rotate.scss
│ ├── ball-grid-beat.scss
│ ├── ball-grid-pulse.scss
│ ├── ball-pulse-rise.scss
│ ├── ball-pulse-round.scss
│ ├── ball-pulse-sync.scss
│ ├── ball-pulse.scss
│ ├── ball-rotate.scss
│ ├── ball-scale-multiple.scss
│ ├── ball-scale-random.scss
│ ├── ball-scale-ripple-multiple.scss
│ ├── ball-scale-ripple.scss
│ ├── ball-scale.scss
│ ├── ball-spin-fade-loader.scss
│ ├── ball-spin-loader.scss
│ ├── ball-triangle-path.scss
│ ├── ball-zig-zag-deflect.scss
│ ├── ball-zig-zag.scss
│ ├── cube-transition.scss
│ ├── line-scale-pulse-out-rapid.scss
│ ├── line-scale-pulse-out.scss
│ ├── line-scale-random.scss
│ ├── line-scale.scss
│ ├── line-spin-fade-loader.scss
│ ├── pacman.scss
│ ├── semi-circle-spin.scss
│ ├── square-spin.scss
│ └── triangle-skew-spin.scss
└── loaders.scss
Condensed preview — 47 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (124K chars).
[
{
"path": ".gitignore",
"chars": 615,
"preview": "# Created by https://www.gitignore.io\n\n### Sass ###\n.sass-cache\n*.css.map\n\n\n### Node ###\n# Logs\nlogs\n*.log\n\n# Runtime da"
},
{
"path": ".scss-lint.yml",
"chars": 3160,
"preview": "scss_files: \"**/*.scss\"\n\nlinters:\n BangFormat:\n enabled: true\n space_before_bang: true\n space_after_bang: fals"
},
{
"path": "Gulpfile.coffee",
"chars": 1254,
"preview": "gulp = require 'gulp'\nsass = require 'gulp-sass'\njade = require 'gulp-jade'\ncssmin = require 'gulp-cssmin'\nrename = requ"
},
{
"path": "README.md",
"chars": 4992,
"preview": "<h1 align=\"center\">Loaders.css</h1>\n\n<p align=\"center\">\n <img src=\"https://img.shields.io/npm/v/loaders.css.svg?style=f"
},
{
"path": "bower.json",
"chars": 444,
"preview": "{\n \"name\": \"loaders.css\",\n \"authors\": [\n \"Connor Atherton <c.liam.atherton@gmail.com>\"\n ],\n \"description\": \"Delig"
},
{
"path": "demo/demo.css",
"chars": 3309,
"preview": "/**\n *\n *\n */\nhtml,\nbody {\n padding: 0;\n margin: 0;\n height: 100%;\n font-size: 16px;\n background: #ed5565;\n color:"
},
{
"path": "demo/demo.html",
"chars": 7972,
"preview": "<!DOCTYPE html5>\n<head>\n <link href=\"http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300\" rel=\"stylesheet\" t"
},
{
"path": "demo/src/demo.jade",
"chars": 5118,
"preview": "doctype html5\nhead\n link(href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300' rel='stylesheet' type='t"
},
{
"path": "demo/src/demo.scss",
"chars": 3254,
"preview": "/**\n *\n *\n */\n$gray: #dcdcdc;\n$text: #fff;\n$bg-color: #ed5565;\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n height: 100%;\n"
},
{
"path": "loaders.css",
"chars": 56509,
"preview": "/**\n * Copyright (c) 2016 Connor Atherton\n *\n * All animations must live in their own file\n * in the animations director"
},
{
"path": "loaders.css.js",
"chars": 1373,
"preview": "(function ($) {\n\n var divs = {\n 'ball-pulse': 3,\n 'ball-grid-pulse': 9,\n 'ball-clip-rotate': 1,\n 'ball-clip"
},
{
"path": "package.json",
"chars": 839,
"preview": "{\n \"name\": \"loaders.css\",\n \"version\": \"0.1.2\",\n \"description\": \"Loading animations in pure css\",\n \"main\": \"loaders.c"
},
{
"path": "src/_functions.scss",
"chars": 102,
"preview": "@function delay($interval, $count, $index) {\n @return ($index * $interval) - ($interval * $count);\n}\n"
},
{
"path": "src/_mixins.scss",
"chars": 381,
"preview": "@mixin global-bg() {\n background-color: $primary-color;\n}\n\n@mixin global-animation() {\n animation-fill-mode: both;\n}\n\n"
},
{
"path": "src/_variables.scss",
"chars": 138,
"preview": "$primary-color: #fff !default;\n$ball-size: 15px !default;\n$margin: 2px !default;\n$line-height: 35px !default;\n$line-widt"
},
{
"path": "src/animations/ball-beat.scss",
"chars": 420,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-beat {\n 50% {\n opacity: 0.2;\n transform: scale(0.75"
},
{
"path": "src/animations/ball-clip-rotate-multiple.scss",
"chars": 877,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50%"
},
{
"path": "src/animations/ball-clip-rotate-pulse.scss",
"chars": 1132,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50%"
},
{
"path": "src/animations/ball-clip-rotate.scss",
"chars": 513,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n tr"
},
{
"path": "src/animations/ball-grid-beat.scss",
"chars": 660,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-grid-beat {\n 50% {\n opacity: 0.7;\n }\n 100% {\n opa"
},
{
"path": "src/animations/ball-grid-pulse.scss",
"chars": 753,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-grid-pulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n "
},
{
"path": "src/animations/ball-pulse-rise.scss",
"chars": 1068,
"preview": "@import '../variables';\n@import '../mixins';\n\n$rise-amount: 30px;\n\n@keyframes ball-pulse-rise-even {\n 0% {\n transfor"
},
{
"path": "src/animations/ball-pulse-round.scss",
"chars": 401,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-pulse-round {\n 0%, 80%, 100% {\n transform: scale(0.0);"
},
{
"path": "src/animations/ball-pulse-sync.scss",
"chars": 608,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$amount: 10px;\n\n@keyframes ball-pulse-sync {\n 33%"
},
{
"path": "src/animations/ball-pulse.scss",
"chars": 632,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes scale {\n 0% {\n transform: scale(1);"
},
{
"path": "src/animations/ball-rotate.scss",
"chars": 659,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n tr"
},
{
"path": "src/animations/ball-scale-multiple.scss",
"chars": 801,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 60px;\n\n@keyframes ball-scale-multiple {\n 0"
},
{
"path": "src/animations/ball-scale-random.scss",
"chars": 537,
"preview": "@import \"ball-scale\";\n\n.ball-scale-random {\n width: 37px;\n height: 40px;\n\n > div {\n @include balls();\n @include"
},
{
"path": "src/animations/ball-scale-ripple-multiple.scss",
"chars": 873,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 50px;\n\n@keyframes ball-scale-ripple-multipl"
},
{
"path": "src/animations/ball-scale-ripple.scss",
"chars": 469,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-scale-ripple {\n 0% {\n transform: scale(0.1);\n opaci"
},
{
"path": "src/animations/ball-scale.scss",
"chars": 370,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-scale {\n 0% {\n transform: scale(0.0);\n }\n 100% {\n "
},
{
"path": "src/animations/ball-spin-fade-loader.scss",
"chars": 1294,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$radius: 25px;\n\n@keyframes ball-spin-fade-loader {"
},
{
"path": "src/animations/ball-spin-loader.scss",
"chars": 1212,
"preview": "@import '../variables';\n@import '../mixins';\n\n$radius: 45px;\n\n@keyframes ball-spin-loader {\n 75% {\n opacity: 0.2;\n "
},
{
"path": "src/animations/ball-triangle-path.scss",
"chars": 1532,
"preview": "@import '../variables';\n@import '../mixins';\n\n$amount: 50px;\n\n@keyframes ball-triangle-path-1 {\n 33% {\n transform: t"
},
{
"path": "src/animations/ball-zig-zag-deflect.scss",
"chars": 1205,
"preview": "@import '../variables';\n@import '../mixins';\n\n$amount: 30px;\n\n@keyframes ball-zig-deflect {\n 17% {\n transform: trans"
},
{
"path": "src/animations/ball-zig-zag.scss",
"chars": 840,
"preview": "@import '../variables';\n@import '../mixins';\n\n$amount: 30px;\n\n@keyframes ball-zig {\n 33% {\n transform: translate(-$a"
},
{
"path": "src/animations/cube-transition.scss",
"chars": 763,
"preview": "@import '../variables';\n@import '../mixins';\n\n$amount: 50px;\n$size: 10px;\n\n@keyframes cube-transition {\n 25% {\n tran"
},
{
"path": "src/animations/line-scale-pulse-out-rapid.scss",
"chars": 627,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes line-scale-pulse-out-rapid {\n 0% {\n transform: scaley(1.0);"
},
{
"path": "src/animations/line-scale-pulse-out.scss",
"chars": 645,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes line-scale-pulse-out {\n 0% {\n trans"
},
{
"path": "src/animations/line-scale-random.scss",
"chars": 687,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes line-scale-party {\n 0% {\n transform: scale(1);\n }\n 50% {\n"
},
{
"path": "src/animations/line-scale.scss",
"chars": 545,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes line-scale {\n 0% {\n transform: scal"
},
{
"path": "src/animations/line-spin-fade-loader.scss",
"chars": 1483,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$radius: 20px;\n\n@keyframes line-spin-fade-loader {"
},
{
"path": "src/animations/pacman.scss",
"chars": 1695,
"preview": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 25px;\n\n@keyframes rotate_pacman_half_up {\n"
},
{
"path": "src/animations/semi-circle-spin.scss",
"chars": 619,
"preview": "@import '../variables';\n@import '../mixins';\n\n$size: 35px;\n$pos: 30%;\n\n@keyframes spin-rotate {\n 0% {\n transform: ro"
},
{
"path": "src/animations/square-spin.scss",
"chars": 576,
"preview": "@import '../variables';\n@import '../mixins';\n\n@keyframes square-spin {\n 25% {\n transform: perspective(100px) rotateX"
},
{
"path": "src/animations/triangle-skew-spin.scss",
"chars": 705,
"preview": "@import '../variables';\n@import '../mixins';\n\n$size: 20px;\n\n@keyframes triangle-skew-spin {\n 25% {\n transform: persp"
},
{
"path": "src/loaders.scss",
"chars": 1472,
"preview": "/**\n * Copyright (c) 2016 Connor Atherton\n *\n * All animations must live in their own file\n * in the animations director"
}
]
About this extraction
This page contains the full source code of the ConnorAtherton/loaders.css GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 47 files (113.4 KB), approximately 36.0k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.