[ { "path": ".gitignore", "content": "# Created by https://www.gitignore.io\n\n### Sass ###\n.sass-cache\n*.css.map\n\n\n### Node ###\n# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode_modules\n" }, { "path": ".scss-lint.yml", "content": "scss_files: \"**/*.scss\"\n\nlinters:\n BangFormat:\n enabled: true\n space_before_bang: true\n space_after_bang: false\n\n BorderZero:\n enabled: true\n convention: zero # or `none`\n\n ColorKeyword:\n enabled: true\n\n ColorVariable:\n enabled: true\n\n Comment:\n enabled: true\n\n DebugStatement:\n enabled: true\n\n DeclarationOrder:\n enabled: true\n\n DuplicateProperty:\n enabled: true\n\n ElsePlacement:\n enabled: true\n style: same_line # or 'new_line'\n\n EmptyLineBetweenBlocks:\n enabled: true\n ignore_single_line_blocks: true\n\n EmptyRule:\n enabled: true\n\n FinalNewline:\n enabled: true\n present: true\n\n HexLength:\n enabled: true\n style: short # or 'long'\n\n HexNotation:\n enabled: true\n style: lowercase # or 'uppercase'\n\n HexValidation:\n enabled: true\n\n IdSelector:\n enabled: true\n\n ImportantRule:\n enabled: true\n\n ImportPath:\n enabled: true\n leading_underscore: false\n filename_extension: false\n\n Indentation:\n enabled: true\n allow_non_nested_indentation: false\n character: space # or 'tab'\n width: 2\n\n LeadingZero:\n enabled: true\n style: exclude_zero # or 'include_zero'\n\n MergeableSelector:\n enabled: true\n force_nesting: true\n\n NameFormat:\n enabled: true\n allow_leading_underscore: true\n convention: hyphenated_lowercase # or 'BEM', or a regex pattern\n\n NestingDepth:\n enabled: true\n max_depth: 3\n\n PlaceholderInExtend:\n enabled: true\n\n PropertyCount:\n enabled: false\n include_nested: false\n max_properties: 10\n\n PropertySortOrder:\n enabled: true\n ignore_unspecified: false\n separate_groups: false\n\n PropertySpelling:\n enabled: true\n extra_properties: []\n\n QualifyingElement:\n enabled: true\n allow_element_with_attribute: false\n allow_element_with_class: false\n allow_element_with_id: false\n\n SelectorDepth:\n enabled: true\n max_depth: 3\n\n SelectorFormat:\n enabled: true\n convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern\n\n Shorthand:\n enabled: true\n\n SingleLinePerProperty:\n enabled: true\n allow_single_line_rule_sets: true\n\n SingleLinePerSelector:\n enabled: true\n\n SpaceAfterComma:\n enabled: true\n\n SpaceAfterPropertyColon:\n enabled: true\n style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'\n\n SpaceAfterPropertyName:\n enabled: true\n\n SpaceBeforeBrace:\n enabled: true\n style: space # or 'new_line'\n allow_single_line_padding: false\n\n SpaceBetweenParens:\n enabled: true\n spaces: 0\n\n StringQuotes:\n enabled: true\n style: single_quotes # or double_quotes\n\n TrailingSemicolon:\n enabled: true\n\n TrailingZero:\n enabled: false\n\n UnnecessaryMantissa:\n enabled: true\n\n UnnecessaryParentReference:\n enabled: true\n\n UrlFormat:\n enabled: true\n\n UrlQuotes:\n enabled: true\n\n VariableForProperty:\n enabled: false\n properties: []\n\n VendorPrefix:\n enabled: true\n identifier_list: base\n additional_identifiers: []\n excluded_identifiers: []\n\n ZeroUnit:\n enabled: true\n\n Compass::*:\n enabled: false\n" }, { "path": "Gulpfile.coffee", "content": "gulp = require 'gulp'\nsass = require 'gulp-sass'\njade = require 'gulp-jade'\ncssmin = require 'gulp-cssmin'\nrename = require 'gulp-rename'\nautoprefixer = require 'gulp-autoprefixer'\ngutil = require 'gulp-util'\nplumber = require 'gulp-plumber'\n\ngulp.task 'scss:compile', ->\n gulp.src './src/loaders.scss'\n .pipe plumber((err) -> console.log(err.stack))\n .pipe sass()\n .pipe autoprefixer \"last 2 versions\", \"> 1%\", \"ie 8\", {\n map: false\n }\n .pipe plumber.stop()\n .pipe gulp.dest('./')\n .pipe cssmin()\n .pipe rename suffix: '.min'\n .pipe gulp.dest './'\n .on 'finish', -> gutil.log('scss build finished.')\n\ngulp.task 'demo:scss:compile', ->\n gulp.src './demo/src/demo.scss'\n .pipe sass({errLogToConsole: true}).on(\"error\", gutil.log).on(\"error\", gutil.beep)\n .pipe gulp.dest './demo/'\n\ngulp.task 'demo:jade:compile', ->\n gulp.src './demo/src/*.jade'\n .pipe jade(pretty: true)\n .pipe gulp.dest './demo/'\n\ngulp.task 'watch', ->\n gulp.watch 'src/**/*.scss', ['scss:compile']\n gulp.watch 'demo/src/**/*.scss', ['demo:scss:compile']\n gulp.watch 'demo/src/**/*.jade', ['demo:jade:compile']\n\ngulp.task 'demo', ['demo:scss:compile', 'demo:jade:compile']\ngulp.task 'default', ['scss:compile', 'demo', 'watch']\n" }, { "path": "README.md", "content": "

Loaders.css

\n\n

\n \n \n

\n\nDelightful and performance-focused pure css loading animations.\n\n### What is this?\n\n[See the demo](http://connoratherton.com/loaders)\n\nA collection of loading animations written entirely in css.\nEach animation is limited to a small subset of css properties in order\nto avoid expensive painting and layout calculations.\n\nI've posted links below to some fantastic articles that go into this\nin a lot more detail.\n\n### Install\n\n```\nbower install loaders.css\n```\n\n```\nnpm i --save loaders.css\n```\n\n### Usage\n\n##### Standard\n- Include `loaders.min.css`\n- Create an element and add the animation class (e.g. `
`)\n- Insert the appropriate number of `
`s into that element\n\n##### jQuery (optional)\n- Include `loaders.min.css`, jQuery, and `loaders.css.js`\n- Create an element and add the animation class (e.g. `
`)\n- `loaders.js` is a simple helper to inject the correct number of div elements for each animation\n- To initialise loaders that are added after page load select the div and call `loaders` on them (e.g. `$('.loader-inner').loaders()`)\n- Enjoy\n\n### Customising\n\n##### Changing the background color\n\nAdd styles to the correct child `div` elements\n\n``` css\n.ball-grid-pulse > div {\n background-color: orange;\n}\n```\n\n##### Changing the loader size\n\nUse a [2D Scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) `transform`\n\n```css\n.loader-small .loader-inner {\n transform: scale(0.5, 0.5);\n}\n```\n\n### Browser support\n\nCheck the [can I use](http://caniuse.com/#search=css-animation) [tables](http://caniuse.com/#search=css-transform).\nAll recent versions of the major browsers are supported and it has support back to IE9.\n\nNote: The loaders aren't run through autoprefixer, see this [issue](https://github.com/ConnorAtherton/loaders.css/issues/18).\n\nIE 11 | Firefox 36 | Chrome 41 | Safari 8\n------ | ---------- | --------- | --------\nāœ” | āœ” | āœ” | āœ”\n\n### Contributing\n\nPull requests are welcome! Create another file in `src/animations`\nand load it in `src/loader.scss`.\n\nIn a separate tab run `gulp --require coffee-script/register`. Open `demo/demo.html`\nin a browser to see your animation running.\n\n### Further research\n\n- http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/\n- http://aerotwist.com/blog/pixels-are-expensive/\n- http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/\n- http://frontendbabel.info/articles/webpage-rendering-101/\n\n### Inspired by loaders.css\n\nA few other folks have taken loaders and ported them elsewhere.\n\n- **React** - [Jon Jaques](https://github.com/jonjaques) built a React demo you can check out [here](https://github.com/jonjaques/react-loaders)\n- **Vue** - [Kirill Khoroshilov](https://github.com/Hokid) loaders wrapped into components [vue-loaders](https://github.com/Hokid/vue-loaders)\n- **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)\n- **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\n- **iOS** - [ninjaprox](https://github.com/ninjaprox/NVActivityIndicatorView) and [ontovnik](https://github.com/gontovnik/DGActivityIndicatorView)\n- **Android** - [Jack Wang](https://github.com/81813780/AVLoadingIndicatorView) created a library and [technofreaky](https://github.com/technofreaky/Loaders.CSS-Android-App) created an app\n\n### Licence\n\nThe MIT License (MIT)\n\nCopyright (c) 2016 Connor Atherton\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "bower.json", "content": "{\n \"name\": \"loaders.css\",\n \"authors\": [\n \"Connor Atherton \"\n ],\n \"description\": \"Delightful and performant pure css loading animations.\",\n \"main\": \"loaders.css\",\n \"keywords\": [\n \"loader\",\n \"animations\",\n \"css\"\n ],\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/ConnorAtherton/loaders.css\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\"\n ]\n}\n" }, { "path": "demo/demo.css", "content": "/**\n *\n *\n */\nhtml,\nbody {\n padding: 0;\n margin: 0;\n height: 100%;\n font-size: 16px;\n background: #ed5565;\n color: #fff;\n font-family: 'Source Sans Pro'; }\n\nh1 {\n font-size: 2.8em;\n font-weight: 700;\n letter-spacing: -1px;\n margin: 0.6rem 0; }\n h1 > span {\n font-weight: 300; }\n\nh2 {\n font-size: 1.15em;\n font-weight: 300;\n margin: 0.3rem 0; }\n\nmain {\n width: 95%;\n max-width: 1000px;\n margin: 4em auto;\n opacity: 0; }\n main.loaded {\n transition: opacity .25s linear;\n opacity: 1; }\n main header {\n width: 100%; }\n main header > div {\n width: 50%; }\n main header > .left,\n main header > .right {\n height: 100%; }\n main .loaders {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap; }\n main .loaders .loader {\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: column;\n flex-grow: 1;\n flex-shrink: 0;\n flex-basis: 25%;\n max-width: 25%;\n height: 200px;\n align-items: center;\n justify-content: center;\n perspective: 500px; }\n main .loaders .loader .tooltip {\n -webkit-transition: all 200ms ease;\n transition: all 200ms ease;\n -webkit-transform: translate3d(-50%, 0%, 0);\n transform: translate3d(-50%, 0%, 0);\n -webkit-transform-origin: 0 10px;\n transform-origin: 0 10px;\n background-color: #fff;\n border-radius: 4px;\n color: #2f2f2f;\n display: block;\n font-size: 14px;\n line-height: 1;\n left: 50%;\n opacity: 0;\n padding: 4px 20px;\n position: absolute;\n text-align: left;\n top: 80%;\n pointer-events: none;\n white-space: nowrap; }\n main .loaders .loader .tooltip:before {\n border: 6px solid;\n border-color: transparent;\n border-bottom-color: #fff;\n content: ' ';\n display: block;\n height: 0;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n top: -12px;\n width: 0; }\n main .loaders .loader .tooltip:after {\n content: ' ';\n display: block;\n position: absolute;\n bottom: -20px;\n left: 0;\n width: 100%;\n height: 20px; }\n main .loaders .loader .tooltip:hover {\n -webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);\n transform: rotateX(0deg) translate3d(-50%, -10%, 0);\n opacity: 1;\n pointer-events: auto; }\n main .loaders .loader:hover .tooltip {\n -webkit-transform: translate3d(-50%, -10%, 0);\n transform: translate3d(-50%, -10%, 0);\n opacity: 1;\n pointer-events: auto; }\n\n/**\n * Util classes\n */\n.left {\n float: left; }\n\n.right {\n float: right; }\n\n.cf, main header {\n content: \"\";\n display: table;\n clear: both; }\n\n/**\n * Buttons\n */\n.btn {\n color: #fff;\n padding: .75rem 1.25rem;\n border: 2px solid #fff;\n border-radius: 4px;\n text-decoration: none;\n transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;\n margin: 2rem 0; }\n .btn:hover {\n transform: scale(1.01562);\n background-color: #fff;\n color: #ed5565; }\n" }, { "path": "demo/demo.html", "content": "\n\n \n \n \n\n\n
\n
\n
\n

Loaders.css

\n

Delightful and performance-focused pure css loading animations.

\n
\n
View on Github
\n
\n
\n
\n
\n
\n
\n
\n
\n

ball-pulse

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

ball-grid-pulse

\n
\n
\n
\n
\n
\n

ball-clip-rotate

\n
\n
\n
\n
\n
\n
\n

ball-clip-rotate-pulse

\n
\n
\n
\n
\n
\n

square-spin

\n
\n
\n
\n
\n
\n
\n

ball-clip-rotate-multiple

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

ball-pulse-rise

\n
\n
\n
\n
\n
\n

ball-rotate

\n
\n
\n
\n
\n
\n
\n

cube-transition

\n
\n
\n
\n
\n
\n
\n

ball-zig-zag

\n
\n
\n
\n
\n
\n
\n

ball-zig-zag-deflect

\n
\n
\n
\n
\n
\n
\n
\n

ball-triangle-path

\n
\n
\n
\n
\n
\n

ball-scale

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

line-scale

\n
\n
\n
\n
\n
\n
\n
\n
\n

line-scale-party

\n
\n
\n
\n
\n
\n
\n
\n

ball-scale-multiple

\n
\n
\n
\n
\n
\n
\n
\n

ball-pulse-sync

\n
\n
\n
\n
\n
\n
\n
\n

ball-beat

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

line-scale-pulse-out

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

line-scale-pulse-out-rapid

\n
\n
\n
\n
\n
\n

ball-scale-ripple

\n
\n
\n
\n
\n
\n
\n
\n

ball-scale-ripple-multiple

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

ball-spin-fade-loader

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

line-spin-fade-loader

\n
\n
\n
\n
\n
\n

triangle-skew-spin

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

pacman

\n
\n
\n
\n
\n
\n

semi-circle-spin

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

ball-grid-beat

\n
\n
\n
\n
\n
\n
\n
\n

ball-scale-random

\n
\n
\n
\n \n" }, { "path": "demo/src/demo.jade", "content": "doctype html5\nhead\n link(href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300' rel='stylesheet' type='text/css')\n link(rel=\"stylesheet\", type=\"text/css\", href=\"demo.css\")\n link(rel=\"stylesheet\", type=\"text/css\", href=\"../loaders.css\")\nbody\n main\n header\n .left\n h1 Loaders\n span .css\n h2 Delightful and performance-focused pure css loading animations.\n\n .right\n a.btn.right(href=\"https://github.com/ConnorAtherton/loaders.css\")\n | View on Github\n\n .loaders\n .loader\n .loader-inner.ball-pulse\n div\n div\n div\n span.tooltip\n p ball-pulse\n\n .loader\n .loader-inner.ball-grid-pulse\n div\n div\n div\n div\n div\n div\n div\n div\n div\n span.tooltip\n p ball-grid-pulse\n\n .loader\n .loader-inner.ball-clip-rotate\n div\n span.tooltip\n p ball-clip-rotate\n\n .loader\n .loader-inner.ball-clip-rotate-pulse\n div\n div\n span.tooltip\n p ball-clip-rotate-pulse\n\n .loader\n .loader-inner.square-spin\n div\n span.tooltip\n p square-spin\n\n .loader\n .loader-inner.ball-clip-rotate-multiple\n div\n div\n span.tooltip\n p ball-clip-rotate-multiple\n\n .loader\n .loader-inner.ball-pulse-rise\n div\n div\n div\n div\n div\n span.tooltip\n p ball-pulse-rise\n\n .loader\n .loader-inner.ball-rotate\n div\n span.tooltip\n p ball-rotate\n\n .loader\n .loader-inner.cube-transition\n div\n div\n span.tooltip\n p cube-transition\n\n .loader\n .loader-inner.ball-zig-zag\n div\n div\n span.tooltip\n p ball-zig-zag\n\n .loader\n .loader-inner.ball-zig-zag-deflect\n div\n div\n span.tooltip\n p ball-zig-zag-deflect\n\n .loader\n .loader-inner.ball-triangle-path\n div\n div\n div\n span.tooltip\n p ball-triangle-path\n\n .loader\n .loader-inner.ball-scale\n div\n span.tooltip\n p ball-scale\n\n .loader\n .loader-inner.line-scale\n div\n div\n div\n div\n div\n span.tooltip\n p line-scale\n\n .loader\n .loader-inner.line-scale-party\n div\n div\n div\n div\n span.tooltip\n p line-scale-party\n\n .loader\n .loader-inner.ball-scale-multiple\n div\n div\n div\n span.tooltip\n p ball-scale-multiple\n\n .loader\n .loader-inner.ball-pulse-sync\n div\n div\n div\n span.tooltip\n p ball-pulse-sync\n\n .loader\n .loader-inner.ball-beat\n div\n div\n div\n span.tooltip\n p ball-beat\n\n .loader\n .loader-inner.line-scale-pulse-out\n div\n div\n div\n div\n div\n span.tooltip\n p line-scale-pulse-out\n\n .loader\n .loader-inner.line-scale-pulse-out-rapid\n div\n div\n div\n div\n div\n span.tooltip\n p line-scale-pulse-out-rapid\n\n .loader\n .loader-inner.ball-scale-ripple\n div\n span.tooltip\n p ball-scale-ripple\n\n .loader\n .loader-inner.ball-scale-ripple-multiple\n div\n div\n div\n span.tooltip\n p ball-scale-ripple-multiple\n\n .loader\n .loader-inner.ball-spin-fade-loader\n div\n div\n div\n div\n div\n div\n div\n div\n span.tooltip\n p ball-spin-fade-loader\n\n .loader\n .loader-inner.line-spin-fade-loader\n div\n div\n div\n div\n div\n div\n div\n div\n span.tooltip\n p line-spin-fade-loader\n\n .loader\n .loader-inner.triangle-skew-spin\n div\n span.tooltip\n p triangle-skew-spin\n\n .loader\n .loader-inner.pacman\n div\n div\n div\n div\n div\n span.tooltip\n p pacman\n\n .loader\n .loader-inner.semi-circle-spin\n div\n span.tooltip\n p semi-circle-spin\n\n .loader\n .loader-inner.ball-grid-beat\n div\n div\n div\n div\n div\n div\n div\n div\n div\n span.tooltip\n p ball-grid-beat\n\n .loader\n .loader-inner.ball-scale-random\n div\n div\n div\n span.tooltip\n p ball-scale-random\n\n script.\n document.addEventListener('DOMContentLoaded', function () {\n document.querySelector('main').className += 'loaded';\n });\n" }, { "path": "demo/src/demo.scss", "content": "/**\n *\n *\n */\n$gray: #dcdcdc;\n$text: #fff;\n$bg-color: #ed5565;\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n height: 100%;\n font-size: 16px;\n background: $bg-color;\n color: $text;\n font-family: 'Source Sans Pro';\n}\n\nh1 {\n font-size: 2.8em;\n font-weight: 700;\n letter-spacing: -1px;\n margin: 0.6rem 0;\n\n > span {\n font-weight: 300;\n }\n}\n\nh2 {\n font-size: 1.15em;\n font-weight: 300;\n margin: 0.3rem 0;\n}\n\nmain {\n width: 95%;\n max-width: 1000px;\n margin: 4em auto;\n opacity: 0;\n\n &.loaded {\n transition: opacity .25s linear;\n opacity: 1;\n }\n\n header {\n @extend .cf;\n\n width: 100%;\n\n > div {\n width: 50%;\n }\n\n > .left,\n > .right {\n height: 100%;\n }\n\n }\n\n .loaders {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n\n .loader {\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: column;\n flex-grow: 1;\n flex-shrink: 0;\n flex-basis: 25%;\n max-width: 25%;\n height: 200px;\n align-items: center;\n justify-content: center;\n perspective: 500px;\n \n .tooltip {\n -webkit-transition: all 200ms ease;\n transition: all 200ms ease;\n -webkit-transform: translate3d(-50%, 0%, 0);\n transform: translate3d(-50%, 0%, 0);\n -webkit-transform-origin: 0 10px;\n transform-origin: 0 10px;\n background-color: #fff;\n border-radius: 4px;\n color: #2f2f2f;\n display: block;\n font-size: 14px;\n line-height: 1;\n left: 50%;\n opacity: 0;\n padding: 4px 20px;\n position: absolute;\n text-align: left;\n top: 80%;\n pointer-events: none;\n white-space: nowrap;\n\n &:before {\n border: 6px solid;\n border-color: transparent;\n border-bottom-color: #fff;\n content: ' ';\n display: block;\n height: 0;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n top: -12px;\n width: 0;\n }\n\n &:after {\n content: ' ';\n display: block;\n position: absolute;\n bottom: -20px;\n left: 0;\n width: 100%;\n height: 20px;\n }\n\n &:hover {\n -webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);\n transform: rotateX(0deg) translate3d(-50%, -10%, 0);\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &:hover .tooltip {\n -webkit-transform: translate3d(-50%, -10%, 0);\n transform: translate3d(-50%, -10%, 0);\n opacity: 1;\n pointer-events: auto;\n }\n }\n }\n}\n\n/**\n * Util classes\n */\n\n.left {\n float: left;\n}\n\n.right {\n float: right;\n}\n\n.cf {\n content: \"\";\n display: table;\n clear: both;\n}\n\n/**\n * Buttons\n */\n\n.btn {\n color: $text;\n padding: .75rem 1.25rem;\n border: 2px solid $text;\n border-radius: 4px;\n text-decoration: none;\n transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;\n margin: 2rem 0;\n\n &:hover {\n transform: scale(1.01562);\n background-color: #fff;\n color: $bg-color;\n }\n}\n\n" }, { "path": "loaders.css", "content": "/**\n * Copyright (c) 2016 Connor Atherton\n *\n * All animations must live in their own file\n * in the animations directory and be included\n * here.\n *\n */\n/**\n * Styles shared by multiple animations\n */\n/**\n * Dots\n */\n@-webkit-keyframes scale {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; }\n 45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 0.7; }\n 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; } }\n@keyframes scale {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; }\n 45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 0.7; }\n 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; } }\n\n.ball-pulse > div:nth-child(1) {\n -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.ball-pulse > div:nth-child(2) {\n -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.ball-pulse > div:nth-child(3) {\n -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.ball-pulse > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block; }\n\n@-webkit-keyframes ball-pulse-sync {\n 33% {\n -webkit-transform: translateY(10px);\n transform: translateY(10px); }\n 66% {\n -webkit-transform: translateY(-10px);\n transform: translateY(-10px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0); } }\n\n@keyframes ball-pulse-sync {\n 33% {\n -webkit-transform: translateY(10px);\n transform: translateY(10px); }\n 66% {\n -webkit-transform: translateY(-10px);\n transform: translateY(-10px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0); } }\n\n.ball-pulse-sync > div:nth-child(1) {\n -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;\n animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }\n\n.ball-pulse-sync > div:nth-child(2) {\n -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;\n animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }\n\n.ball-pulse-sync > div:nth-child(3) {\n -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;\n animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }\n\n.ball-pulse-sync > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block; }\n\n@-webkit-keyframes ball-scale {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0; } }\n\n@keyframes ball-scale {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0; } }\n\n.ball-scale > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n height: 60px;\n width: 60px;\n -webkit-animation: ball-scale 1s 0s ease-in-out infinite;\n animation: ball-scale 1s 0s ease-in-out infinite; }\n\n@keyframes ball-scale {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0; } }\n\n.ball-scale > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n height: 60px;\n width: 60px;\n -webkit-animation: ball-scale 1s 0s ease-in-out infinite;\n animation: ball-scale 1s 0s ease-in-out infinite; }\n\n.ball-scale-random {\n width: 37px;\n height: 40px; }\n .ball-scale-random > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n display: inline-block;\n height: 30px;\n width: 30px;\n -webkit-animation: ball-scale 1s 0s ease-in-out infinite;\n animation: ball-scale 1s 0s ease-in-out infinite; }\n .ball-scale-random > div:nth-child(1) {\n margin-left: -7px;\n -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite;\n animation: ball-scale 1s 0.2s ease-in-out infinite; }\n .ball-scale-random > div:nth-child(3) {\n margin-left: -2px;\n margin-top: 9px;\n -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite;\n animation: ball-scale 1s 0.5s ease-in-out infinite; }\n\n@-webkit-keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n.ball-rotate {\n position: relative; }\n .ball-rotate > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: relative; }\n .ball-rotate > div:first-child {\n -webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;\n animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }\n .ball-rotate > div:before, .ball-rotate > div:after {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n content: \"\";\n position: absolute;\n opacity: 0.8; }\n .ball-rotate > div:before {\n top: 0px;\n left: -28px; }\n .ball-rotate > div:after {\n top: 0px;\n left: 25px; }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n.ball-clip-rotate > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n height: 26px;\n width: 26px;\n background: transparent !important;\n display: inline-block;\n -webkit-animation: rotate 0.75s 0s linear infinite;\n animation: rotate 0.75s 0s linear infinite; }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1); }\n 50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6); }\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1); } }\n\n@keyframes scale {\n 30% {\n -webkit-transform: scale(0.3);\n transform: scale(0.3); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n.ball-clip-rotate-pulse {\n position: relative;\n -webkit-transform: translateY(-15px);\n transform: translateY(-15px); }\n .ball-clip-rotate-pulse > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n top: 0px;\n left: 0px;\n border-radius: 100%; }\n .ball-clip-rotate-pulse > div:first-child {\n background: #fff;\n height: 16px;\n width: 16px;\n top: 7px;\n left: -7px;\n -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;\n animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }\n .ball-clip-rotate-pulse > div:last-child {\n position: absolute;\n border: 2px solid #fff;\n width: 30px;\n height: 30px;\n left: -16px;\n top: -2px;\n background: transparent;\n border: 2px solid;\n border-color: #fff transparent #fff transparent;\n -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;\n animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;\n -webkit-animation-duration: 1s;\n animation-duration: 1s; }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1); }\n 50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6); }\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1); } }\n\n.ball-clip-rotate-multiple {\n position: relative; }\n .ball-clip-rotate-multiple > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n left: -20px;\n top: -20px;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n border-top-color: transparent;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n -webkit-animation: rotate 1s 0s ease-in-out infinite;\n animation: rotate 1s 0s ease-in-out infinite; }\n .ball-clip-rotate-multiple > div:last-child {\n display: inline-block;\n top: -10px;\n left: -10px;\n width: 15px;\n height: 15px;\n -webkit-animation-duration: 0.5s;\n animation-duration: 0.5s;\n border-color: #fff transparent #fff transparent;\n -webkit-animation-direction: reverse;\n animation-direction: reverse; }\n\n@-webkit-keyframes ball-scale-ripple {\n 0% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 1; }\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0.7; }\n 100% {\n opacity: 0.0; } }\n\n@keyframes ball-scale-ripple {\n 0% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 1; }\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0.7; }\n 100% {\n opacity: 0.0; } }\n\n.ball-scale-ripple > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n height: 50px;\n width: 50px;\n border-radius: 100%;\n border: 2px solid #fff;\n -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);\n animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }\n\n@-webkit-keyframes ball-scale-ripple-multiple {\n 0% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 1; }\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0.7; }\n 100% {\n opacity: 0.0; } }\n\n@keyframes ball-scale-ripple-multiple {\n 0% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n opacity: 1; }\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0.7; }\n 100% {\n opacity: 0.0; } }\n\n.ball-scale-ripple-multiple {\n position: relative;\n -webkit-transform: translateY(-25px);\n transform: translateY(-25px); }\n .ball-scale-ripple-multiple > div:nth-child(0) {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s; }\n .ball-scale-ripple-multiple > div:nth-child(1) {\n -webkit-animation-delay: -0.6s;\n animation-delay: -0.6s; }\n .ball-scale-ripple-multiple > div:nth-child(2) {\n -webkit-animation-delay: -0.4s;\n animation-delay: -0.4s; }\n .ball-scale-ripple-multiple > div:nth-child(3) {\n -webkit-animation-delay: -0.2s;\n animation-delay: -0.2s; }\n .ball-scale-ripple-multiple > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n top: -2px;\n left: -26px;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n border: 2px solid #fff;\n -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);\n animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }\n\n@-webkit-keyframes ball-beat {\n 50% {\n opacity: 0.2;\n -webkit-transform: scale(0.75);\n transform: scale(0.75); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n@keyframes ball-beat {\n 50% {\n opacity: 0.2;\n -webkit-transform: scale(0.75);\n transform: scale(0.75); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n.ball-beat > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n -webkit-animation: ball-beat 0.7s 0s infinite linear;\n animation: ball-beat 0.7s 0s infinite linear; }\n .ball-beat > div:nth-child(2n-1) {\n -webkit-animation-delay: -0.35s !important;\n animation-delay: -0.35s !important; }\n\n@-webkit-keyframes ball-scale-multiple {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0);\n opacity: 0; }\n 5% {\n opacity: 1; }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0; } }\n\n@keyframes ball-scale-multiple {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0);\n opacity: 0; }\n 5% {\n opacity: 1; }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0; } }\n\n.ball-scale-multiple {\n position: relative;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px); }\n .ball-scale-multiple > div:nth-child(2) {\n -webkit-animation-delay: -0.4s;\n animation-delay: -0.4s; }\n .ball-scale-multiple > div:nth-child(3) {\n -webkit-animation-delay: -0.2s;\n animation-delay: -0.2s; }\n .ball-scale-multiple > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n left: -30px;\n top: 0px;\n opacity: 0;\n margin: 0;\n width: 60px;\n height: 60px;\n -webkit-animation: ball-scale-multiple 1s 0s linear infinite;\n animation: ball-scale-multiple 1s 0s linear infinite; }\n\n@-webkit-keyframes ball-triangle-path-1 {\n 33% {\n -webkit-transform: translate(25px, -50px);\n transform: translate(25px, -50px); }\n 66% {\n -webkit-transform: translate(50px, 0px);\n transform: translate(50px, 0px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n@keyframes ball-triangle-path-1 {\n 33% {\n -webkit-transform: translate(25px, -50px);\n transform: translate(25px, -50px); }\n 66% {\n -webkit-transform: translate(50px, 0px);\n transform: translate(50px, 0px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n@-webkit-keyframes ball-triangle-path-2 {\n 33% {\n -webkit-transform: translate(25px, 50px);\n transform: translate(25px, 50px); }\n 66% {\n -webkit-transform: translate(-25px, 50px);\n transform: translate(-25px, 50px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n@keyframes ball-triangle-path-2 {\n 33% {\n -webkit-transform: translate(25px, 50px);\n transform: translate(25px, 50px); }\n 66% {\n -webkit-transform: translate(-25px, 50px);\n transform: translate(-25px, 50px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n@-webkit-keyframes ball-triangle-path-3 {\n 33% {\n -webkit-transform: translate(-50px, 0px);\n transform: translate(-50px, 0px); }\n 66% {\n -webkit-transform: translate(-25px, -50px);\n transform: translate(-25px, -50px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n@keyframes ball-triangle-path-3 {\n 33% {\n -webkit-transform: translate(-50px, 0px);\n transform: translate(-50px, 0px); }\n 66% {\n -webkit-transform: translate(-25px, -50px);\n transform: translate(-25px, -50px); }\n 100% {\n -webkit-transform: translate(0px, 0px);\n transform: translate(0px, 0px); } }\n\n.ball-triangle-path {\n position: relative;\n -webkit-transform: translate(-29.994px, -37.50938px);\n transform: translate(-29.994px, -37.50938px); }\n .ball-triangle-path > div:nth-child(1) {\n -webkit-animation-name: ball-triangle-path-1;\n animation-name: ball-triangle-path-1;\n -webkit-animation-delay: 0;\n animation-delay: 0;\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite; }\n .ball-triangle-path > div:nth-child(2) {\n -webkit-animation-name: ball-triangle-path-2;\n animation-name: ball-triangle-path-2;\n -webkit-animation-delay: 0;\n animation-delay: 0;\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite; }\n .ball-triangle-path > div:nth-child(3) {\n -webkit-animation-name: ball-triangle-path-3;\n animation-name: ball-triangle-path-3;\n -webkit-animation-delay: 0;\n animation-delay: 0;\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite; }\n .ball-triangle-path > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n border: 1px solid #fff; }\n .ball-triangle-path > div:nth-of-type(1) {\n top: 50px; }\n .ball-triangle-path > div:nth-of-type(2) {\n left: 25px; }\n .ball-triangle-path > div:nth-of-type(3) {\n top: 50px;\n left: 50px; }\n\n@-webkit-keyframes ball-pulse-rise-even {\n 0% {\n -webkit-transform: scale(1.1);\n transform: scale(1.1); }\n 25% {\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px); }\n 50% {\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 75% {\n -webkit-transform: translateY(30px);\n transform: translateY(30px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n@keyframes ball-pulse-rise-even {\n 0% {\n -webkit-transform: scale(1.1);\n transform: scale(1.1); }\n 25% {\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px); }\n 50% {\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 75% {\n -webkit-transform: translateY(30px);\n transform: translateY(30px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n@-webkit-keyframes ball-pulse-rise-odd {\n 0% {\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 25% {\n -webkit-transform: translateY(30px);\n transform: translateY(30px); }\n 50% {\n -webkit-transform: scale(1.1);\n transform: scale(1.1); }\n 75% {\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -webkit-transform: scale(0.75);\n transform: scale(0.75); } }\n\n@keyframes ball-pulse-rise-odd {\n 0% {\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 25% {\n -webkit-transform: translateY(30px);\n transform: translateY(30px); }\n 50% {\n -webkit-transform: scale(1.1);\n transform: scale(1.1); }\n 75% {\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px); }\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -webkit-transform: scale(0.75);\n transform: scale(0.75); } }\n\n.ball-pulse-rise > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);\n animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-delay: 0;\n animation-delay: 0; }\n .ball-pulse-rise > div:nth-child(2n) {\n -webkit-animation-name: ball-pulse-rise-even;\n animation-name: ball-pulse-rise-even; }\n .ball-pulse-rise > div:nth-child(2n-1) {\n -webkit-animation-name: ball-pulse-rise-odd;\n animation-name: ball-pulse-rise-odd; }\n\n@-webkit-keyframes ball-grid-beat {\n 50% {\n opacity: 0.7; }\n 100% {\n opacity: 1; } }\n\n@keyframes ball-grid-beat {\n 50% {\n opacity: 0.7; }\n 100% {\n opacity: 1; } }\n\n.ball-grid-beat {\n width: 57px; }\n .ball-grid-beat > div:nth-child(1) {\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n -webkit-animation-duration: 1.45s;\n animation-duration: 1.45s; }\n .ball-grid-beat > div:nth-child(2) {\n -webkit-animation-delay: -0.02s;\n animation-delay: -0.02s;\n -webkit-animation-duration: 0.97s;\n animation-duration: 0.97s; }\n .ball-grid-beat > div:nth-child(3) {\n -webkit-animation-delay: 0.66s;\n animation-delay: 0.66s;\n -webkit-animation-duration: 1.23s;\n animation-duration: 1.23s; }\n .ball-grid-beat > div:nth-child(4) {\n -webkit-animation-delay: 0.64s;\n animation-delay: 0.64s;\n -webkit-animation-duration: 1.24s;\n animation-duration: 1.24s; }\n .ball-grid-beat > div:nth-child(5) {\n -webkit-animation-delay: -0.19s;\n animation-delay: -0.19s;\n -webkit-animation-duration: 1.13s;\n animation-duration: 1.13s; }\n .ball-grid-beat > div:nth-child(6) {\n -webkit-animation-delay: 0.69s;\n animation-delay: 0.69s;\n -webkit-animation-duration: 1.42s;\n animation-duration: 1.42s; }\n .ball-grid-beat > div:nth-child(7) {\n -webkit-animation-delay: 0.58s;\n animation-delay: 0.58s;\n -webkit-animation-duration: 1.14s;\n animation-duration: 1.14s; }\n .ball-grid-beat > div:nth-child(8) {\n -webkit-animation-delay: 0.21s;\n animation-delay: 0.21s;\n -webkit-animation-duration: 1.17s;\n animation-duration: 1.17s; }\n .ball-grid-beat > div:nth-child(9) {\n -webkit-animation-delay: -0.18s;\n animation-delay: -0.18s;\n -webkit-animation-duration: 0.65s;\n animation-duration: 0.65s; }\n .ball-grid-beat > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n float: left;\n -webkit-animation-name: ball-grid-beat;\n animation-name: ball-grid-beat;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-delay: 0;\n animation-delay: 0; }\n\n@-webkit-keyframes ball-grid-pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1); }\n 50% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.7; }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; } }\n\n@keyframes ball-grid-pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1); }\n 50% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.7; }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1; } }\n\n.ball-grid-pulse {\n width: 57px; }\n .ball-grid-pulse > div:nth-child(1) {\n -webkit-animation-delay: 0.22s;\n animation-delay: 0.22s;\n -webkit-animation-duration: 0.9s;\n animation-duration: 0.9s; }\n .ball-grid-pulse > div:nth-child(2) {\n -webkit-animation-delay: 0.64s;\n animation-delay: 0.64s;\n -webkit-animation-duration: 1s;\n animation-duration: 1s; }\n .ball-grid-pulse > div:nth-child(3) {\n -webkit-animation-delay: -0.15s;\n animation-delay: -0.15s;\n -webkit-animation-duration: 0.63s;\n animation-duration: 0.63s; }\n .ball-grid-pulse > div:nth-child(4) {\n -webkit-animation-delay: -0.03s;\n animation-delay: -0.03s;\n -webkit-animation-duration: 1.24s;\n animation-duration: 1.24s; }\n .ball-grid-pulse > div:nth-child(5) {\n -webkit-animation-delay: 0.08s;\n animation-delay: 0.08s;\n -webkit-animation-duration: 1.37s;\n animation-duration: 1.37s; }\n .ball-grid-pulse > div:nth-child(6) {\n -webkit-animation-delay: 0.43s;\n animation-delay: 0.43s;\n -webkit-animation-duration: 1.55s;\n animation-duration: 1.55s; }\n .ball-grid-pulse > div:nth-child(7) {\n -webkit-animation-delay: 0.05s;\n animation-delay: 0.05s;\n -webkit-animation-duration: 0.7s;\n animation-duration: 0.7s; }\n .ball-grid-pulse > div:nth-child(8) {\n -webkit-animation-delay: 0.05s;\n animation-delay: 0.05s;\n -webkit-animation-duration: 0.97s;\n animation-duration: 0.97s; }\n .ball-grid-pulse > div:nth-child(9) {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n -webkit-animation-duration: 0.63s;\n animation-duration: 0.63s; }\n .ball-grid-pulse > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n float: left;\n -webkit-animation-name: ball-grid-pulse;\n animation-name: ball-grid-pulse;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-delay: 0;\n animation-delay: 0; }\n\n@-webkit-keyframes ball-spin-fade-loader {\n 50% {\n opacity: 0.3;\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n@keyframes ball-spin-fade-loader {\n 50% {\n opacity: 0.3;\n -webkit-transform: scale(0.4);\n transform: scale(0.4); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n.ball-spin-fade-loader {\n position: relative;\n top: -10px;\n left: -10px; }\n .ball-spin-fade-loader > div:nth-child(1) {\n top: 25px;\n left: 0;\n -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;\n animation: ball-spin-fade-loader 1s -0.96s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(2) {\n top: 17.04545px;\n left: 17.04545px;\n -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;\n animation: ball-spin-fade-loader 1s -0.84s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(3) {\n top: 0;\n left: 25px;\n -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;\n animation: ball-spin-fade-loader 1s -0.72s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(4) {\n top: -17.04545px;\n left: 17.04545px;\n -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;\n animation: ball-spin-fade-loader 1s -0.6s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(5) {\n top: -25px;\n left: 0;\n -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;\n animation: ball-spin-fade-loader 1s -0.48s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(6) {\n top: -17.04545px;\n left: -17.04545px;\n -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;\n animation: ball-spin-fade-loader 1s -0.36s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(7) {\n top: 0;\n left: -25px;\n -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;\n animation: ball-spin-fade-loader 1s -0.24s infinite linear; }\n .ball-spin-fade-loader > div:nth-child(8) {\n top: 17.04545px;\n left: -17.04545px;\n -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;\n animation: ball-spin-fade-loader 1s -0.12s infinite linear; }\n .ball-spin-fade-loader > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute; }\n\n@-webkit-keyframes ball-spin-loader {\n 75% {\n opacity: 0.2; }\n 100% {\n opacity: 1; } }\n\n@keyframes ball-spin-loader {\n 75% {\n opacity: 0.2; }\n 100% {\n opacity: 1; } }\n\n.ball-spin-loader {\n position: relative; }\n .ball-spin-loader > span:nth-child(1) {\n top: 45px;\n left: 0;\n -webkit-animation: ball-spin-loader 2s 0.9s infinite linear;\n animation: ball-spin-loader 2s 0.9s infinite linear; }\n .ball-spin-loader > span:nth-child(2) {\n top: 30.68182px;\n left: 30.68182px;\n -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;\n animation: ball-spin-loader 2s 1.8s infinite linear; }\n .ball-spin-loader > span:nth-child(3) {\n top: 0;\n left: 45px;\n -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;\n animation: ball-spin-loader 2s 2.7s infinite linear; }\n .ball-spin-loader > span:nth-child(4) {\n top: -30.68182px;\n left: 30.68182px;\n -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;\n animation: ball-spin-loader 2s 3.6s infinite linear; }\n .ball-spin-loader > span:nth-child(5) {\n top: -45px;\n left: 0;\n -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;\n animation: ball-spin-loader 2s 4.5s infinite linear; }\n .ball-spin-loader > span:nth-child(6) {\n top: -30.68182px;\n left: -30.68182px;\n -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;\n animation: ball-spin-loader 2s 5.4s infinite linear; }\n .ball-spin-loader > span:nth-child(7) {\n top: 0;\n left: -45px;\n -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;\n animation: ball-spin-loader 2s 6.3s infinite linear; }\n .ball-spin-loader > span:nth-child(8) {\n top: 30.68182px;\n left: -30.68182px;\n -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;\n animation: ball-spin-loader 2s 7.2s infinite linear; }\n .ball-spin-loader > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n background: green; }\n\n@-webkit-keyframes ball-zig {\n 33% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 66% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@keyframes ball-zig {\n 33% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 66% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@-webkit-keyframes ball-zag {\n 33% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 66% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@keyframes ball-zag {\n 33% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 66% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n.ball-zig-zag {\n position: relative;\n -webkit-transform: translate(-15px, -15px);\n transform: translate(-15px, -15px); }\n .ball-zig-zag > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n margin-left: 15px;\n top: 4px;\n left: -7px; }\n .ball-zig-zag > div:first-child {\n -webkit-animation: ball-zig 0.7s 0s infinite linear;\n animation: ball-zig 0.7s 0s infinite linear; }\n .ball-zig-zag > div:last-child {\n -webkit-animation: ball-zag 0.7s 0s infinite linear;\n animation: ball-zag 0.7s 0s infinite linear; }\n\n@-webkit-keyframes ball-zig-deflect {\n 17% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 34% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 50% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n 67% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 84% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@keyframes ball-zig-deflect {\n 17% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 34% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 50% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n 67% {\n -webkit-transform: translate(15px, -30px);\n transform: translate(15px, -30px); }\n 84% {\n -webkit-transform: translate(-15px, -30px);\n transform: translate(-15px, -30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@-webkit-keyframes ball-zag-deflect {\n 17% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 34% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 50% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n 67% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 84% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n@keyframes ball-zag-deflect {\n 17% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 34% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 50% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n 67% {\n -webkit-transform: translate(-15px, 30px);\n transform: translate(-15px, 30px); }\n 84% {\n -webkit-transform: translate(15px, 30px);\n transform: translate(15px, 30px); }\n 100% {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); } }\n\n.ball-zig-zag-deflect {\n position: relative;\n -webkit-transform: translate(-15px, -15px);\n transform: translate(-15px, -15px); }\n .ball-zig-zag-deflect > div {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n margin-left: 15px;\n top: 4px;\n left: -7px; }\n .ball-zig-zag-deflect > div:first-child {\n -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;\n animation: ball-zig-deflect 1.5s 0s infinite linear; }\n .ball-zig-zag-deflect > div:last-child {\n -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;\n animation: ball-zag-deflect 1.5s 0s infinite linear; }\n\n/**\n * Lines\n */\n@-webkit-keyframes line-scale {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n@keyframes line-scale {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n.line-scale > div:nth-child(1) {\n -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.line-scale > div:nth-child(2) {\n -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.line-scale > div:nth-child(3) {\n -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.line-scale > div:nth-child(4) {\n -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.line-scale > div:nth-child(5) {\n -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }\n\n.line-scale > div {\n background-color: #fff;\n width: 4px;\n height: 35px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block; }\n\n@-webkit-keyframes line-scale-party {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1); }\n 50% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n@keyframes line-scale-party {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1); }\n 50% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5); }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1); } }\n\n.line-scale-party > div:nth-child(1) {\n -webkit-animation-delay: 0.48s;\n animation-delay: 0.48s;\n -webkit-animation-duration: 0.54s;\n animation-duration: 0.54s; }\n\n.line-scale-party > div:nth-child(2) {\n -webkit-animation-delay: -0.15s;\n animation-delay: -0.15s;\n -webkit-animation-duration: 1.15s;\n animation-duration: 1.15s; }\n\n.line-scale-party > div:nth-child(3) {\n -webkit-animation-delay: 0.04s;\n animation-delay: 0.04s;\n -webkit-animation-duration: 0.77s;\n animation-duration: 0.77s; }\n\n.line-scale-party > div:nth-child(4) {\n -webkit-animation-delay: -0.12s;\n animation-delay: -0.12s;\n -webkit-animation-duration: 0.61s;\n animation-duration: 0.61s; }\n\n.line-scale-party > div {\n background-color: #fff;\n width: 4px;\n height: 35px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n -webkit-animation-name: line-scale-party;\n animation-name: line-scale-party;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-delay: 0;\n animation-delay: 0; }\n\n@-webkit-keyframes line-scale-pulse-out {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n@keyframes line-scale-pulse-out {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n.line-scale-pulse-out > div {\n background-color: #fff;\n width: 4px;\n height: 35px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);\n animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }\n .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {\n -webkit-animation-delay: -0.4s !important;\n animation-delay: -0.4s !important; }\n .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {\n -webkit-animation-delay: -0.2s !important;\n animation-delay: -0.2s !important; }\n\n@-webkit-keyframes line-scale-pulse-out-rapid {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 80% {\n -webkit-transform: scaley(0.3);\n transform: scaley(0.3); }\n 90% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n@keyframes line-scale-pulse-out-rapid {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 80% {\n -webkit-transform: scaley(0.3);\n transform: scaley(0.3); }\n 90% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n.line-scale-pulse-out-rapid > div {\n background-color: #fff;\n width: 4px;\n height: 35px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block;\n vertical-align: middle;\n -webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);\n animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }\n .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {\n -webkit-animation-delay: -0.25s !important;\n animation-delay: -0.25s !important; }\n .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {\n -webkit-animation-delay: 0s !important;\n animation-delay: 0s !important; }\n\n@-webkit-keyframes line-spin-fade-loader {\n 50% {\n opacity: 0.3; }\n 100% {\n opacity: 1; } }\n\n@keyframes line-spin-fade-loader {\n 50% {\n opacity: 0.3; }\n 100% {\n opacity: 1; } }\n\n.line-spin-fade-loader {\n position: relative;\n top: -10px;\n left: -4px; }\n .line-spin-fade-loader > div:nth-child(1) {\n top: 20px;\n left: 0;\n -webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(2) {\n top: 13.63636px;\n left: 13.63636px;\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n -webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(3) {\n top: 0;\n left: 20px;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n -webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(4) {\n top: -13.63636px;\n left: 13.63636px;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n -webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(5) {\n top: -20px;\n left: 0;\n -webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(6) {\n top: -13.63636px;\n left: -13.63636px;\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n -webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(7) {\n top: 0;\n left: -20px;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n -webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }\n .line-spin-fade-loader > div:nth-child(8) {\n top: 13.63636px;\n left: -13.63636px;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;\n animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }\n .line-spin-fade-loader > div {\n background-color: #fff;\n width: 4px;\n height: 35px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n position: absolute;\n width: 5px;\n height: 15px; }\n\n/**\n * Misc\n */\n@-webkit-keyframes triangle-skew-spin {\n 25% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);\n transform: perspective(100px) rotateX(180deg) rotateY(0); }\n 50% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n transform: perspective(100px) rotateX(180deg) rotateY(180deg); }\n 75% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);\n transform: perspective(100px) rotateX(0) rotateY(180deg); }\n 100% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(0);\n transform: perspective(100px) rotateX(0) rotateY(0); } }\n@keyframes triangle-skew-spin {\n 25% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);\n transform: perspective(100px) rotateX(180deg) rotateY(0); }\n 50% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n transform: perspective(100px) rotateX(180deg) rotateY(180deg); }\n 75% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);\n transform: perspective(100px) rotateX(0) rotateY(180deg); }\n 100% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(0);\n transform: perspective(100px) rotateX(0) rotateY(0); } }\n\n.triangle-skew-spin > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n width: 0;\n height: 0;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n border-bottom: 20px solid #fff;\n -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;\n animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }\n\n@-webkit-keyframes square-spin {\n 25% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);\n transform: perspective(100px) rotateX(180deg) rotateY(0); }\n 50% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n transform: perspective(100px) rotateX(180deg) rotateY(180deg); }\n 75% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);\n transform: perspective(100px) rotateX(0) rotateY(180deg); }\n 100% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(0);\n transform: perspective(100px) rotateX(0) rotateY(0); } }\n\n@keyframes square-spin {\n 25% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);\n transform: perspective(100px) rotateX(180deg) rotateY(0); }\n 50% {\n -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n transform: perspective(100px) rotateX(180deg) rotateY(180deg); }\n 75% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);\n transform: perspective(100px) rotateX(0) rotateY(180deg); }\n 100% {\n -webkit-transform: perspective(100px) rotateX(0) rotateY(0);\n transform: perspective(100px) rotateX(0) rotateY(0); } }\n\n.square-spin > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n width: 50px;\n height: 50px;\n background: #fff;\n -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;\n animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }\n\n@-webkit-keyframes rotate_pacman_half_up {\n 0% {\n -webkit-transform: rotate(270deg);\n transform: rotate(270deg); }\n 50% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); }\n 100% {\n -webkit-transform: rotate(270deg);\n transform: rotate(270deg); } }\n\n@keyframes rotate_pacman_half_up {\n 0% {\n -webkit-transform: rotate(270deg);\n transform: rotate(270deg); }\n 50% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); }\n 100% {\n -webkit-transform: rotate(270deg);\n transform: rotate(270deg); } }\n\n@-webkit-keyframes rotate_pacman_half_down {\n 0% {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg); }\n 50% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg); } }\n\n@keyframes rotate_pacman_half_down {\n 0% {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg); }\n 50% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg); } }\n\n@-webkit-keyframes pacman-balls {\n 75% {\n opacity: 0.7; }\n 100% {\n -webkit-transform: translate(-100px, -6.25px);\n transform: translate(-100px, -6.25px); } }\n\n@keyframes pacman-balls {\n 75% {\n opacity: 0.7; }\n 100% {\n -webkit-transform: translate(-100px, -6.25px);\n transform: translate(-100px, -6.25px); } }\n\n.pacman {\n position: relative; }\n .pacman > div:nth-child(2) {\n -webkit-animation: pacman-balls 1s -0.99s infinite linear;\n animation: pacman-balls 1s -0.99s infinite linear; }\n .pacman > div:nth-child(3) {\n -webkit-animation: pacman-balls 1s -0.66s infinite linear;\n animation: pacman-balls 1s -0.66s infinite linear; }\n .pacman > div:nth-child(4) {\n -webkit-animation: pacman-balls 1s -0.33s infinite linear;\n animation: pacman-balls 1s -0.33s infinite linear; }\n .pacman > div:nth-child(5) {\n -webkit-animation: pacman-balls 1s 0s infinite linear;\n animation: pacman-balls 1s 0s infinite linear; }\n .pacman > div:first-of-type {\n width: 0px;\n height: 0px;\n border-right: 25px solid transparent;\n border-top: 25px solid #fff;\n border-left: 25px solid #fff;\n border-bottom: 25px solid #fff;\n border-radius: 25px;\n -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;\n animation: rotate_pacman_half_up 0.5s 0s infinite;\n position: relative;\n left: -30px; }\n .pacman > div:nth-child(2) {\n width: 0px;\n height: 0px;\n border-right: 25px solid transparent;\n border-top: 25px solid #fff;\n border-left: 25px solid #fff;\n border-bottom: 25px solid #fff;\n border-radius: 25px;\n -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;\n animation: rotate_pacman_half_down 0.5s 0s infinite;\n margin-top: -50px;\n position: relative;\n left: -30px; }\n .pacman > div:nth-child(3),\n .pacman > div:nth-child(4),\n .pacman > div:nth-child(5),\n .pacman > div:nth-child(6) {\n background-color: #fff;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n margin: 2px;\n width: 10px;\n height: 10px;\n position: absolute;\n -webkit-transform: translate(0, -6.25px);\n transform: translate(0, -6.25px);\n top: 25px;\n left: 70px; }\n\n@-webkit-keyframes cube-transition {\n 25% {\n -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);\n transform: translateX(50px) scale(0.5) rotate(-90deg); }\n 50% {\n -webkit-transform: translate(50px, 50px) rotate(-180deg);\n transform: translate(50px, 50px) rotate(-180deg); }\n 75% {\n -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);\n transform: translateY(50px) scale(0.5) rotate(-270deg); }\n 100% {\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg); } }\n\n@keyframes cube-transition {\n 25% {\n -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);\n transform: translateX(50px) scale(0.5) rotate(-90deg); }\n 50% {\n -webkit-transform: translate(50px, 50px) rotate(-180deg);\n transform: translate(50px, 50px) rotate(-180deg); }\n 75% {\n -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);\n transform: translateY(50px) scale(0.5) rotate(-270deg); }\n 100% {\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg); } }\n\n.cube-transition {\n position: relative;\n -webkit-transform: translate(-25px, -25px);\n transform: translate(-25px, -25px); }\n .cube-transition > div {\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n width: 10px;\n height: 10px;\n position: absolute;\n top: -5px;\n left: -5px;\n background-color: #fff;\n -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;\n animation: cube-transition 1.6s 0s infinite ease-in-out; }\n .cube-transition > div:last-child {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s; }\n\n@-webkit-keyframes spin-rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes spin-rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 50% {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n.semi-circle-spin {\n position: relative;\n width: 35px;\n height: 35px;\n overflow: hidden; }\n .semi-circle-spin > div {\n position: absolute;\n border-width: 0px;\n border-radius: 100%;\n -webkit-animation: spin-rotate 0.6s 0s infinite linear;\n animation: spin-rotate 0.6s 0s infinite linear;\n background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);\n width: 100%;\n height: 100%; }\n" }, { "path": "loaders.css.js", "content": "(function ($) {\n\n var divs = {\n 'ball-pulse': 3,\n 'ball-grid-pulse': 9,\n 'ball-clip-rotate': 1,\n 'ball-clip-rotate-pulse': 2,\n 'square-spin': 1,\n 'ball-clip-rotate-multiple': 2,\n 'ball-pulse-rise': 5,\n 'ball-rotate': 1,\n 'cube-transition': 2,\n 'ball-zig-zag': 2,\n 'ball-zig-zag-deflect': 2,\n 'ball-triangle-path': 3,\n 'ball-scale': 1,\n 'line-scale': 5,\n 'line-scale-party': 4,\n 'ball-scale-multiple': 3,\n 'ball-pulse-sync': 3,\n 'ball-beat': 3,\n 'line-scale-pulse-out': 5,\n 'line-scale-pulse-out-rapid': 5,\n 'ball-scale-ripple': 1,\n 'ball-scale-ripple-multiple': 3,\n 'ball-spin-fade-loader': 8,\n 'line-spin-fade-loader': 8,\n 'triangle-skew-spin': 1,\n 'pacman': 5,\n 'ball-grid-beat': 9,\n 'semi-circle-spin': 1,\n 'ball-scale-random': 3\n };\n\n var addDivs = function(n) {\n var arr = [];\n for (i = 1; i <= n; i++) {\n arr.push('
');\n }\n return arr;\n };\n\n $.fn.loaders = function() {\n return this.each(function() {\n var elem = $(this);\n $.each(divs, function(key, value) {\n if (elem.hasClass(key))\n elem.html(addDivs(value))\n })\n });\n };\n\n $(function() {\n $.each(divs, function(key, value) {\n $('.loader-inner.' + key).html(addDivs(value));\n })\n });\n\n}).call(window, window.$ || window.jQuery || window.Zepto);\n" }, { "path": "package.json", "content": "{\n \"name\": \"loaders.css\",\n \"version\": \"0.1.2\",\n \"description\": \"Loading animations in pure css\",\n \"main\": \"loaders.css\",\n \"style\": \"loaders.css\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git@github.com:ConnorAtherton/loaders.css.git\"\n },\n \"keywords\": [\n \"css\",\n \"loaders\",\n \"animation\",\n \"animate\"\n ],\n \"author\": \"Connor Atherton\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/ConnorAtherton/loaders.css/issues\"\n },\n \"homepage\": \"https://github.com/ConnorAtherton/loaders.css\",\n \"devDependencies\": {\n \"coffee-script\": \"^1.9.1\",\n \"gulp\": \"^3.8.10\",\n \"gulp-autoprefixer\": \"^2.0.0\",\n \"gulp-cssmin\": \"^0.1.6\",\n \"gulp-jade\": \"^0.10.0\",\n \"gulp-plumber\": \"1.0.1\",\n \"gulp-rename\": \"^1.2.0\",\n \"gulp-sass\": \"^2.1.1\",\n \"gulp-util\": \"^3.0.3\",\n \"scss-lint\": \"0.0.0\"\n }\n}\n" }, { "path": "src/_functions.scss", "content": "@function delay($interval, $count, $index) {\n @return ($index * $interval) - ($interval * $count);\n}\n" }, { "path": "src/_mixins.scss", "content": "@mixin global-bg() {\n background-color: $primary-color;\n}\n\n@mixin global-animation() {\n animation-fill-mode: both;\n}\n\n@mixin balls() {\n @include global-bg();\n\n width: $ball-size;\n height: $ball-size;\n border-radius: 100%;\n margin: $margin;\n}\n\n@mixin lines() {\n @include global-bg();\n\n width: $line-width;\n height: $line-height;\n border-radius: 2px;\n margin: $margin;\n}\n" }, { "path": "src/_variables.scss", "content": "$primary-color: #fff !default;\n$ball-size: 15px !default;\n$margin: 2px !default;\n$line-height: 35px !default;\n$line-width: 4px !default;\n\n" }, { "path": "src/animations/ball-beat.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-beat {\n 50% {\n opacity: 0.2;\n transform: scale(0.75);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.ball-beat {\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n animation: ball-beat 0.7s 0s infinite linear;\n\n &:nth-child(2n-1) {\n animation-delay: -0.35s !important;\n }\n }\n}\n" }, { "path": "src/animations/ball-clip-rotate-multiple.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(0.6);\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n}\n\n.ball-clip-rotate-multiple {\n position: relative;\n\n > div {\n @include global-animation();\n\n position: absolute;\n left: -20px;\n top: -20px;\n border: 2px solid $primary-color;\n border-bottom-color: transparent;\n border-top-color: transparent;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n animation: rotate 1s 0s ease-in-out infinite;\n\n &:last-child {\n display: inline-block;\n top: -10px;\n left: -10px;\n width: 15px;\n height: 15px;\n animation-duration: 0.5s;\n border-color: $primary-color transparent $primary-color transparent;\n animation-direction: reverse;\n }\n }\n}\n" }, { "path": "src/animations/ball-clip-rotate-pulse.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(0.6);\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n}\n\n@keyframes scale {\n 30% {\n transform: scale(0.3);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.ball-clip-rotate-pulse {\n position: relative;\n transform: translateY(-15px);\n\n > div {\n @include global-animation();\n\n position: absolute;\n top: 0px;\n left: 0px;\n border-radius: 100%;\n\n &:first-child {\n background: $primary-color;\n height: 16px;\n width: 16px;\n top: 7px;\n left: -7px;\n animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;\n }\n\n &:last-child {\n position: absolute;\n border: 2px solid $primary-color;\n width: 30px;\n height: 30px; \n left: -16px;\n top: -2px;\n background: transparent;\n border: 2px solid;\n border-color: $primary-color transparent $primary-color transparent;\n animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;\n animation-duration: 1s;\n }\n }\n}\n" }, { "path": "src/animations/ball-clip-rotate.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ball-clip-rotate {\n\n > div {\n @include balls();\n @include global-animation();\n\n border: 2px solid $primary-color;\n border-bottom-color: transparent;\n height: 26px;\n width: 26px;\n background: transparent !important;\n display: inline-block;\n animation: rotate 0.75s 0s linear infinite;\n }\n}\n" }, { "path": "src/animations/ball-grid-beat.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-grid-beat {\n 50% {\n opacity: 0.7;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@mixin ball-grid-beat($n:9) {\n @for $i from 1 through $n {\n > div:nth-child(#{$i}) {\n animation-delay: ((random(100) / 100) - 0.2) + s;\n animation-duration: ((random(100) / 100) + 0.6) + s;\n }\n }\n\n}\n\n.ball-grid-beat {\n @include ball-grid-beat();\n width: ($ball-size * 3) + $margin * 6;\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n float: left;\n animation-name: ball-grid-beat;\n animation-iteration-count: infinite;\n animation-delay: 0;\n }\n}\n" }, { "path": "src/animations/ball-grid-pulse.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-grid-pulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(0.5);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@mixin ball-grid-pulse($n:9) {\n @for $i from 1 through $n {\n > div:nth-child(#{$i}) {\n animation-delay: ((random(100) / 100) - 0.2) + s;\n animation-duration: ((random(100) / 100) + 0.6) + s;\n }\n }\n\n}\n\n.ball-grid-pulse {\n @include ball-grid-pulse();\n width: ($ball-size * 3) + $margin * 6;\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n float: left;\n animation-name: ball-grid-pulse;\n animation-iteration-count: infinite;\n animation-delay: 0;\n }\n}\n" }, { "path": "src/animations/ball-pulse-rise.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$rise-amount: 30px;\n\n@keyframes ball-pulse-rise-even {\n 0% {\n transform: scale(1.1);\n }\n 25% {\n transform: translateY(-$rise-amount);\n }\n 50% {\n transform: scale(0.4);\n }\n 75% {\n transform: translateY($rise-amount);\n }\n 100% {\n transform: translateY(0);\n transform: scale(1.0);\n }\n}\n\n@keyframes ball-pulse-rise-odd {\n 0% {\n transform: scale(0.4);\n }\n 25% {\n transform: translateY($rise-amount);\n }\n 50% {\n transform: scale(1.1);\n }\n 75% {\n transform: translateY(-$rise-amount);\n }\n 100% {\n transform: translateY(0);\n transform: scale(0.75);\n }\n}\n\n.ball-pulse-rise {\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n animation-duration: 1s;\n animation-timing-function: cubic-bezier(.15,.46,.9,.6);\n animation-iteration-count: infinite;\n animation-delay: 0;\n\n &:nth-child(2n) {\n animation-name: ball-pulse-rise-even;\n }\n\n &:nth-child(2n-1) {\n animation-name: ball-pulse-rise-odd;\n }\n }\n}\n" }, { "path": "src/animations/ball-pulse-round.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-pulse-round {\n 0%, 80%, 100% {\n transform: scale(0.0);\n -webkit-transform: scale(0.0);\n } 40% {\n transform: scale(1.0);\n -webkit-transform: scale(1.0);\n }\n}\n\n.ball-pulse-round {\n\n > div {\n @include global-animation();\n\n width: 10px;\n height: 10px;\n animation: ball-pulse-round 1.2s infinite ease-in-out;\n }\n}\n\n" }, { "path": "src/animations/ball-pulse-sync.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$amount: 10px;\n\n@keyframes ball-pulse-sync {\n 33% {\n transform: translateY($amount);\n }\n 66% {\n transform: translateY(-$amount);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n@mixin ball-pulse-sync($n: 3, $start: 1) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n animation: ball-pulse-sync 0.6s delay(0.07s, $n, $i) infinite ease-in-out;\n }\n }\n}\n\n.ball-pulse-sync {\n @include ball-pulse-sync();\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n }\n}\n" }, { "path": "src/animations/ball-pulse.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes scale {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 45% {\n transform: scale(0.1);\n opacity: 0.7;\n }\n 80% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n// mixins should be separated out\n@mixin ball-pulse($n: 3, $start: 1) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n animation: scale 0.75s delay(0.12s, $n, $i) infinite cubic-bezier(.2,.68,.18,1.08);\n }\n }\n}\n\n.ball-pulse {\n @include ball-pulse();\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n }\n}\n" }, { "path": "src/animations/ball-rotate.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ball-rotate {\n position: relative;\n\n > div {\n @include balls();\n @include global-animation();\n\n position: relative;\n\n &:first-child {\n animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;\n }\n\n &:before, &:after {\n @include balls();\n\n content: \"\";\n position: absolute;\n opacity: 0.8;\n }\n\n &:before {\n top: 0px;\n left: -28px;\n }\n\n &:after {\n top: 0px;\n left: 25px;\n }\n }\n}\n" }, { "path": "src/animations/ball-scale-multiple.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 60px;\n\n@keyframes ball-scale-multiple {\n 0% {\n transform: scale(0.0);\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.0);\n opacity: 0;\n }\n}\n\n@mixin ball-scale-multiple ($n: 3, $start: 2) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n animation-delay: delay(0.2s, $n, $i - 1);\n }\n }\n}\n\n.ball-scale-multiple {\n @include ball-scale-multiple();\n\n position: relative;\n transform: translateY(-$size / 2);\n\n > div {\n @include balls();\n @include global-animation();\n\n position: absolute;\n left: -30px;\n top: 0px;\n opacity: 0;\n margin: 0;\n width: $size;\n height: $size;\n animation: ball-scale-multiple 1s 0s linear infinite;\n }\n}\n" }, { "path": "src/animations/ball-scale-random.scss", "content": "@import \"ball-scale\";\n\n.ball-scale-random {\n width: 37px;\n height: 40px;\n\n > div {\n @include balls();\n @include global-animation();\n \n position: absolute;\n display: inline-block;\n height: 30px;\n width: 30px;\n animation: ball-scale 1s 0s ease-in-out infinite;\n\n &:nth-child(1) {\n margin-left: -7px;\n animation: ball-scale 1s 0.2s ease-in-out infinite;\n }\n\n &:nth-child(3) {\n margin-left: -2px;\n margin-top: 9px;\n animation: ball-scale 1s 0.5s ease-in-out infinite;\n }\n }\n}\n" }, { "path": "src/animations/ball-scale-ripple-multiple.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 50px;\n\n@keyframes ball-scale-ripple-multiple {\n 0% {\n transform: scale(0.1);\n opacity: 1;\n }\n 70% {\n transform: scale(1);\n opacity: 0.7;\n }\n 100% {\n opacity: 0.0;\n }\n}\n\n@mixin ball-scale-ripple-multiple ($n:3, $start:0) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n animation-delay: delay(0.2s, $n, $i - 1);\n }\n }\n}\n\n.ball-scale-ripple-multiple {\n @include ball-scale-ripple-multiple();\n\n position: relative;\n transform: translateY(-$size / 2);\n\n > div {\n @include global-animation();\n\n position: absolute;\n top: -2px;\n left: -26px;\n width: $size;\n height: $size;\n border-radius: 100%;\n border: 2px solid $primary-color;\n animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);\n }\n}\n" }, { "path": "src/animations/ball-scale-ripple.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-scale-ripple {\n 0% {\n transform: scale(0.1);\n opacity: 1;\n }\n 70% {\n transform: scale(1);\n opacity: 0.7;\n }\n 100% {\n opacity: 0.0;\n }\n}\n\n.ball-scale-ripple {\n\n > div {\n @include global-animation();\n\n height: 50px;\n width: 50px;\n border-radius: 100%;\n border: 2px solid $primary-color;;\n animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);\n }\n}\n" }, { "path": "src/animations/ball-scale.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes ball-scale {\n 0% {\n transform: scale(0.0);\n }\n 100% {\n transform: scale(1.0);\n opacity: 0;\n }\n}\n\n.ball-scale {\n\n > div {\n @include balls();\n @include global-animation();\n\n display: inline-block;\n height: 60px;\n width: 60px;\n animation: ball-scale 1s 0s ease-in-out infinite;\n }\n}\n" }, { "path": "src/animations/ball-spin-fade-loader.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$radius: 25px;\n\n@keyframes ball-spin-fade-loader {\n 50% {\n opacity: 0.3;\n transform: scale(0.4);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@mixin ball-spin-fade-loader($n:8, $start:1) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n $iter: 360 / $n;\n $quarter: ($radius / 2) + ($radius / 5.5);\n\n @if $i == 1 {\n top: $radius;\n left: 0;\n } @else if $i == 2 {\n top: $quarter;\n left: $quarter;\n } @else if $i == 3 {\n top: 0;\n left: $radius;\n } @else if $i == 4 {\n top: -$quarter;\n left: $quarter;\n } @else if $i == 5 {\n top: -$radius;\n left: 0;\n } @else if $i == 6 {\n top: -$quarter;\n left: -$quarter;\n } @else if $i == 7 {\n top: 0;\n left: -$radius;\n } @else if $i == 8 {\n top: $quarter;\n left: -$quarter;\n }\n\n animation: ball-spin-fade-loader 1s delay(0.12s, $n, $i - 1) infinite linear;\n }\n }\n}\n\n.ball-spin-fade-loader {\n @include ball-spin-fade-loader();\n\n position: relative;\n top: -10px;\n left: -10px;\n\n > div {\n @include balls();\n @include global-animation();\n\n position: absolute;\n }\n}\n" }, { "path": "src/animations/ball-spin-loader.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$radius: 45px;\n\n@keyframes ball-spin-loader {\n 75% {\n opacity: 0.2;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@mixin ball-spin-loader($n:8, $start:1) {\n @for $i from $start through $n {\n > span:nth-child(#{$i}) {\n $iter: 360 / $n;\n $quarter: ($radius / 2) + ($radius / 5.5);\n\n @if $i == 1 {\n top: $radius;\n left: 0;\n } @else if $i == 2 {\n top: $quarter;\n left: $quarter;\n } @else if $i == 3 {\n top: 0;\n left: $radius;\n } @else if $i == 4 {\n top: -$quarter;\n left: $quarter;\n } @else if $i == 5 {\n top: -$radius;\n left: 0;\n } @else if $i == 6 {\n top: -$quarter;\n left: -$quarter;\n } @else if $i == 7 {\n top: 0;\n left: -$radius;\n } @else if $i == 8 {\n top: $quarter;\n left: -$quarter;\n }\n\n animation: ball-spin-loader 2s ($i * 0.9s) infinite linear;\n }\n }\n}\n\n.ball-spin-loader {\n @include ball-spin-loader();\n position: relative;\n\n > div {\n @include global-animation();\n\n position: absolute;\n width: 15px;\n height: 15px;\n border-radius: 100%;\n background: green;\n }\n}\n" }, { "path": "src/animations/ball-triangle-path.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$amount: 50px;\n\n@keyframes ball-triangle-path-1 {\n 33% {\n transform: translate($amount / 2, -$amount);\n }\n 66% {\n transform: translate($amount, 0px);\n }\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n@keyframes ball-triangle-path-2 {\n 33% {\n transform: translate($amount / 2, $amount);\n }\n 66% {\n transform: translate(- $amount / 2, $amount);\n }\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n@keyframes ball-triangle-path-3 {\n 33% {\n transform: translate(-$amount, 0px);\n }\n 66% {\n transform: translate(- $amount / 2, -$amount);\n }\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n@mixin ball-triangle-path($n:3) {\n $animations: ball-triangle-path-1 ball-triangle-path-2 ball-triangle-path-3;\n\n @for $i from 1 through $n {\n > div:nth-child(#{$i}) {\n animation-name: nth($animations, $i);\n animation-delay: 0;\n animation-duration: 2s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n }\n }\n}\n\n.ball-triangle-path {\n position: relative;\n @include ball-triangle-path();\n transform: translate(-$amount / 1.667, -$amount / 1.333);\n\n > div {\n @include global-animation();\n\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n border: 1px solid $primary-color;\n\n &:nth-of-type(1) {\n top: $amount;\n }\n\n &:nth-of-type(2) {\n left: $amount / 2;\n }\n\n &:nth-of-type(3) {\n top: $amount;\n left: $amount;\n }\n }\n}\n" }, { "path": "src/animations/ball-zig-zag-deflect.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$amount: 30px;\n\n@keyframes ball-zig-deflect {\n 17% {\n transform: translate(-$amount/2, -$amount);\n }\n 34% {\n transform: translate($amount/2, -$amount);\n }\n 50% {\n transform: translate(0, 0);\n }\n 67% {\n transform: translate($amount/2, -$amount);\n }\n 84% {\n transform: translate(-$amount/2, -$amount);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes ball-zag-deflect {\n 17% {\n transform: translate($amount/2, $amount);\n }\n 34% {\n transform: translate(-$amount/2, $amount);\n }\n 50% {\n transform: translate(0, 0);\n }\n 67% {\n transform: translate(-$amount/2, $amount);\n }\n 84% {\n transform: translate($amount/2, $amount);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n.ball-zig-zag-deflect {\n position: relative;\n transform: translate(-$amount / 2, -$amount / 2);\n\n > div {\n @include balls();\n @include global-animation();\n\n position: absolute;\n margin-left: $amount / 2;\n top: 4px;\n left: -7px;\n\n &:first-child {\n animation: ball-zig-deflect 1.5s 0s infinite linear;\n }\n\n &:last-child {\n animation: ball-zag-deflect 1.5s 0s infinite linear;\n }\n }\n}\n\n" }, { "path": "src/animations/ball-zig-zag.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$amount: 30px;\n\n@keyframes ball-zig {\n 33% {\n transform: translate(-$amount/2, -$amount);\n }\n 66% {\n transform: translate($amount/2, -$amount);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes ball-zag {\n 33% {\n transform: translate($amount/2, $amount);\n }\n 66% {\n transform: translate(-$amount/2, $amount);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n.ball-zig-zag {\n position: relative;\n transform: translate(-$amount / 2, -$amount / 2);\n\n > div {\n @include balls();\n @include global-animation();\n\n position: absolute;\n margin-left: $amount / 2;\n top: 4px;\n left: -7px;\n\n &:first-child {\n animation: ball-zig 0.7s 0s infinite linear;\n }\n\n &:last-child {\n animation: ball-zag 0.7s 0s infinite linear;\n }\n }\n}\n" }, { "path": "src/animations/cube-transition.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$amount: 50px;\n$size: 10px;\n\n@keyframes cube-transition {\n 25% {\n transform: translateX($amount) scale(0.5) rotate(-90deg);\n }\n 50% {\n transform: translate($amount, $amount) rotate(-180deg);\n }\n 75% {\n transform: translateY($amount) scale(0.5) rotate(-270deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n.cube-transition {\n position: relative;\n transform: translate(-$amount / 2, -$amount / 2);\n\n > div {\n @include global-animation();\n\n width: $size;\n height: $size;\n position: absolute;\n top: -5px;\n left: -5px;\n background-color: $primary-color;\n animation: cube-transition 1.6s 0s infinite ease-in-out;\n\n &:last-child {\n animation-delay: -0.8s\n }\n }\n}\n" }, { "path": "src/animations/line-scale-pulse-out-rapid.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes line-scale-pulse-out-rapid {\n 0% {\n transform: scaley(1.0);\n }\n 80% {\n transform: scaley(0.3);\n }\n 90% {\n transform: scaley(1.0);\n }\n}\n\n.line-scale-pulse-out-rapid {\n\n > div {\n @include lines();\n @include global-animation();\n\n display: inline-block;\n vertical-align: middle;\n animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(.11,.49,.38,.78);\n\n &:nth-child(2), &:nth-child(4) {\n animation-delay: -0.25s !important;\n }\n\n &:nth-child(1), &:nth-child(5) {\n animation-delay: 0s !important;\n }\n }\n}\n" }, { "path": "src/animations/line-scale-pulse-out.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes line-scale-pulse-out {\n 0% {\n transform: scaley(1.0);\n }\n 50% {\n transform: scaley(0.4);\n }\n 100% {\n transform: scaley(1.0);\n }\n}\n\n.line-scale-pulse-out {\n\n > div {\n @include lines();\n @include global-animation();\n\n display: inline-block;\n animation: line-scale-pulse-out 0.9s delay(0.2s, 3, 0) infinite cubic-bezier(.85,.25,.37,.85);\n\n &:nth-child(2), &:nth-child(4) {\n animation-delay: delay(0.2s, 3, 1) !important;\n }\n\n &:nth-child(1), &:nth-child(5) {\n animation-delay: delay(0.2s, 3, 2) !important;\n }\n\n }\n}\n" }, { "path": "src/animations/line-scale-random.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes line-scale-party {\n 0% {\n transform: scale(1);\n }\n 50% {\n $random: 0.5;\n transform: scale($random);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@mixin line-scale-party($n:4) {\n @for $i from 1 through $n {\n > div:nth-child(#{$i}) {\n animation-delay: ((random(100) / 100) - 0.2) + s;\n animation-duration: ((random(100) / 100) + 0.3) + s;\n }\n }\n}\n\n.line-scale-party {\n @include line-scale-party();\n\n > div {\n @include lines();\n @include global-animation();\n\n display: inline-block;\n animation-name: line-scale-party;\n animation-iteration-count: infinite;\n animation-delay: 0;\n }\n}\n" }, { "path": "src/animations/line-scale.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n@keyframes line-scale {\n 0% {\n transform: scaley(1.0);\n }\n 50% {\n transform: scaley(0.4);\n }\n 100% {\n transform: scaley(1.0);\n }\n}\n\n@mixin line-scale($n:5) {\n @for $i from 1 through $n {\n > div:nth-child(#{$i}) {\n animation: line-scale 1s delay(0.1s, $n, $i) infinite cubic-bezier(.2,.68,.18,1.08);\n }\n }\n}\n\n.line-scale {\n @include line-scale();\n\n > div {\n @include lines();\n @include global-animation();\n\n display: inline-block;\n }\n}\n" }, { "path": "src/animations/line-spin-fade-loader.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$radius: 20px;\n\n@keyframes line-spin-fade-loader {\n 50% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@mixin line-spin-fade-loader($n:8, $start:1) {\n @for $i from $start through $n {\n > div:nth-child(#{$i}) {\n $iter: 360 / $n;\n $quarter: ($radius / 2) + ($radius / 5.5);\n\n @if $i == 1 {\n top: $radius;\n left: 0;\n } @else if $i == 2 {\n top: $quarter;\n left: $quarter;\n transform: rotate(-45deg);\n } @else if $i == 3 {\n top: 0;\n left: $radius;\n transform: rotate(90deg);\n } @else if $i == 4 {\n top: -$quarter;\n left: $quarter;\n transform: rotate(45deg);\n } @else if $i == 5 {\n top: -$radius;\n left: 0;\n } @else if $i == 6 {\n top: -$quarter;\n left: -$quarter;\n transform: rotate(-45deg);\n } @else if $i == 7 {\n top: 0;\n left: -$radius;\n transform: rotate(90deg);\n } @else if $i == 8 {\n top: $quarter;\n left: -$quarter;\n transform: rotate(45deg);\n }\n\n animation: line-spin-fade-loader 1.2s delay(0.12s, $n, $i) infinite ease-in-out;\n }\n }\n}\n\n.line-spin-fade-loader {\n @include line-spin-fade-loader();\n position: relative;\n top: -10px;\n left: -4px;\n\n > div {\n @include lines();\n @include global-animation();\n\n position: absolute;\n width: 5px;\n height: 15px;\n }\n}\n" }, { "path": "src/animations/pacman.scss", "content": "@import '../variables';\n@import '../mixins';\n@import '../functions';\n\n$size: 25px;\n\n@keyframes rotate_pacman_half_up {\n 0% {\n transform:rotate(270deg);\n }\n 50% {\n transform:rotate(360deg);\n }\n 100% {\n transform:rotate(270deg);\n }\n}\n\n@keyframes rotate_pacman_half_down {\n 0% {\n transform:rotate(90deg);\n }\n 50% {\n transform:rotate(0deg);\n }\n 100% {\n transform:rotate(90deg);\n }\n}\n\n@mixin pacman_design(){\n width: 0px;\n height: 0px;\n border-right: $size solid transparent;\n border-top: $size solid $primary-color;\n border-left: $size solid $primary-color;\n border-bottom: $size solid $primary-color;\n border-radius: $size;\n}\n\n@keyframes pacman-balls {\n 75% {\n opacity: 0.7;\n }\n 100% {\n transform: translate(-4 * $size, -$size / 4);\n }\n}\n\n@mixin ball-placement($n:3, $start:0) {\n @for $i from $start through $n {\n > div:nth-child(#{$i + 2}) {\n animation: pacman-balls 1s delay(.33s, $n, $i) infinite linear;\n }\n }\n}\n\n.pacman {\n @include ball-placement();\n\n position: relative;\n\n > div:first-of-type {\n @include pacman_design();\n animation: rotate_pacman_half_up 0.5s 0s infinite;\n position: relative;\n left: -30px;\n }\n\n > div:nth-child(2) {\n @include pacman_design();\n animation: rotate_pacman_half_down 0.5s 0s infinite;\n margin-top: -2 * $size;\n position: relative;\n left: -30px;\n }\n\n > div:nth-child(3),\n > div:nth-child(4),\n > div:nth-child(5),\n > div:nth-child(6) {\n @include balls();\n\n width: 10px;\n height: 10px;\n\n position: absolute;\n transform: translate(0, -$size / 4);\n top: 25px;\n left: 70px;\n }\n}" }, { "path": "src/animations/semi-circle-spin.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$size: 35px;\n$pos: 30%;\n\n@keyframes spin-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.semi-circle-spin {\n position: relative;\n width: $size;\n height: $size;\n overflow: hidden;\n\n > div {\n position: absolute;\n border-width: 0px;\n border-radius: 100%;\n animation: spin-rotate 0.6s 0s infinite linear;\n background-image: linear-gradient(transparent 0%, transparent (100% - $pos), $primary-color $pos, $primary-color 100%);\n width: 100%;\n height: 100%;\n }\n}" }, { "path": "src/animations/square-spin.scss", "content": "@import '../variables';\n@import '../mixins';\n\n@keyframes square-spin {\n 25% {\n transform: perspective(100px) rotateX(180deg) rotateY(0);\n }\n 50% {\n transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n }\n 75% {\n transform: perspective(100px) rotateX(0) rotateY(180deg);\n }\n 100% {\n transform: perspective(100px) rotateX(0) rotateY(0);\n }\n}\n\n.square-spin {\n\n > div {\n @include global-animation();\n\n width: 50px;\n height: 50px;\n background: $primary-color;\n animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;\n }\n}\n" }, { "path": "src/animations/triangle-skew-spin.scss", "content": "@import '../variables';\n@import '../mixins';\n\n$size: 20px;\n\n@keyframes triangle-skew-spin {\n 25% {\n transform: perspective(100px) rotateX(180deg) rotateY(0);\n }\n 50% {\n transform: perspective(100px) rotateX(180deg) rotateY(180deg);\n }\n 75% {\n transform: perspective(100px) rotateX(0) rotateY(180deg);\n }\n 100% {\n transform: perspective(100px) rotateX(0) rotateY(0);\n }\n}\n\n.triangle-skew-spin {\n\n > div {\n @include global-animation();\n\n width: 0;\n height: 0;\n border-left: $size solid transparent;\n border-right: $size solid transparent;\n border-bottom: $size solid $primary-color;\n animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;\n }\n}\n" }, { "path": "src/loaders.scss", "content": "/**\n * Copyright (c) 2016 Connor Atherton\n *\n * All animations must live in their own file\n * in the animations directory and be included\n * here.\n *\n */\n\n/**\n * Styles shared by multiple animations\n */\n@import 'variables';\n@import 'mixins';\n\n/**\n * Dots\n */\n@import 'animations/ball-pulse';\n@import 'animations/ball-pulse-sync';\n@import 'animations/ball-scale';\n@import 'animations/ball-scale-random';\n@import 'animations/ball-rotate';\n@import 'animations/ball-clip-rotate';\n@import 'animations/ball-clip-rotate-pulse';\n@import 'animations/ball-clip-rotate-multiple';\n@import 'animations/ball-scale-ripple';\n@import 'animations/ball-scale-ripple-multiple';\n@import 'animations/ball-beat';\n@import 'animations/ball-scale-multiple';\n@import 'animations/ball-triangle-path';\n@import 'animations/ball-pulse-rise';\n@import 'animations/ball-grid-beat';\n@import 'animations/ball-grid-pulse';\n@import 'animations/ball-spin-fade-loader';\n@import 'animations/ball-spin-loader';\n@import 'animations/ball-zig-zag';\n@import 'animations/ball-zig-zag-deflect';\n\n/**\n * Lines\n */\n@import 'animations/line-scale';\n@import 'animations/line-scale-random';\n@import 'animations/line-scale-pulse-out';\n@import 'animations/line-scale-pulse-out-rapid';\n@import 'animations/line-spin-fade-loader';\n\n/**\n * Misc\n */\n@import 'animations/triangle-skew-spin';\n@import 'animations/square-spin';\n@import 'animations/pacman';\n@import 'animations/cube-transition';\n@import 'animations/semi-circle-spin';\n" } ]