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 ================================================

Loaders.css

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. `
`) - Insert the appropriate number of `
`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. `
`) - `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 " ], "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 ================================================

Loaders.css

Delightful and performance-focused pure css loading animations.

View on Github

ball-pulse

ball-grid-pulse

ball-clip-rotate

ball-clip-rotate-pulse

square-spin

ball-clip-rotate-multiple

ball-pulse-rise

ball-rotate

cube-transition

ball-zig-zag

ball-zig-zag-deflect

ball-triangle-path

ball-scale

line-scale

line-scale-party

ball-scale-multiple

ball-pulse-sync

ball-beat

line-scale-pulse-out

line-scale-pulse-out-rapid

ball-scale-ripple

ball-scale-ripple-multiple

ball-spin-fade-loader

line-spin-fade-loader

triangle-skew-spin

pacman

semi-circle-spin

ball-grid-beat

ball-scale-random
================================================ 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('
'); } 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';