@hashdhronas/hash-loaders/build/index.js

Customizable bunch of react loaders

module.exports=function(n){var t={};function a(e){if(t[e])return t[e].exports;var i=t[e]={i:e,l:!1,exports:{}};return n[e].call(i.exports,i,i.exports,a),i.l=!0,i.exports}return a.m=n,a.c=t,a.d=function(n,t,e){a.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:e})},a.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},a.t=function(n,t){if(1&t&&(n=a(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var e=Object.create(null);if(a.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var i in n)a.d(e,i,function(t){return n[t]}.bind(null,i));return e},a.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return a.d(t,"a",t),t},a.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},a.p="",a(a.s=0)}([function(n,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Types=t.Loader=void 0;var e=function(){function n(n,t){for(var a=0;a<t.length;a++){var e=t[a];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(n,e.key,e)}}return function(t,a,e){return a&&n(t.prototype,a),e&&n(t,e),t}}(),i=a(1),r=s(i),o=s(a(2)),l=s(a(5));function s(n){return n&&n.__esModule?n:{default:n}}function p(n,t,a){return t in n?Object.defineProperty(n,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[t]=a,n}function f(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}function m(n,t){if(!n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?n:t}a(6);var d=t.Loader=function(n){function t(){return f(this,t),m(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(n,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);n.prototype=Object.create(t&&t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(n,t):n.__proto__=t)}(t,n),e(t,[{key:"renderDiv",value:function(n){var t=this.props.type,a=this.props.styles||{};return this.props.color&&(a.backgroundColor=this.props.color),r.default.createElement("div",{key:n,style:a,className:t})}},{key:"render",value:function(){var n,t=this,a=function(n){var t=-1,a=[];for(;++t<n;)a.push(t);return a}(b[this.props.type]),e=(0,l.default)((p(n={loader:!0},"loader-"+this.props.size,"md"!==this.props.size),p(n,"loader-active",this.props.active),p(n,"loader-hidden",!this.props.active),n),this.props.className),i=(0,l.default)(["loader-inner",this.props.type,this.props.innerClassName]);return r.default.createElement("div",{className:e,style:this.props.style},r.default.createElement("div",{className:i},a.map((function(n,a){return t.renderDiv(a)}))))}}],[{key:"removeType",value:function(n){delete b[key]}},{key:"addType",value:function(n,t){return b[n]=t}}]),t}(i.Component);d.propTypes={type:o.default.string,active:o.default.bool,color:o.default.string,innerClassName:o.default.string},d.defaultProps={type:"ball-pulse",active:!0},t.default=d;var b=t.Types={"ball-pulse":3,"ball-grid-pulse":9,"ball-clip-rotate":1,"ball-clip-rotate-pulse":2,"square-spin":1,"ball-clip-rotate-multiple":2,"ball-pulse-rise":5,"ball-rotate":1,"cube-transition":2,"ball-zig-zag":2,"ball-zig-zag-deflect":2,"ball-triangle-path":3,"ball-scale":1,"line-scale":5,"line-scale-party":4,"ball-scale-multiple":3,"ball-pulse-sync":3,"ball-beat":3,"line-scale-pulse-out":5,"line-scale-pulse-out-rapid":5,"ball-scale-ripple":1,"ball-scale-ripple-multiple":3,"ball-spin-fade-loader":8,"line-spin-fade-loader":8,"triangle-skew-spin":1,pacman:5,"ball-grid-beat":9,"semi-circle-spin":1}},function(n,t){n.exports=require("react")},function(n,t,a){n.exports=a(3)()},function(n,t,a){"use strict";var e=a(4);function i(){}function r(){}r.resetWarningCache=i,n.exports=function(){function n(n,t,a,i,r,o){if(o!==e){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return n}n.isRequired=n;var a={array:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:t,element:n,elementType:n,instanceOf:t,node:n,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:i};return a.PropTypes=a,a}},function(n,t,a){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(n,t,a){var e;
/*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/!function(){"use strict";var a={}.hasOwnProperty;function i(){for(var n=[],t=0;t<arguments.length;t++){var e=arguments[t];if(e){var r=typeof e;if("string"===r||"number"===r)n.push(e);else if(Array.isArray(e)&&e.length){var o=i.apply(null,e);o&&n.push(o)}else if("object"===r)for(var l in e)a.call(e,l)&&e[l]&&n.push(l)}}return n.join(" ")}n.exports?(i.default=i,n.exports=i):void 0===(e=function(){return i}.apply(t,[]))||(n.exports=e)}()},function(n,t,a){var e=a(7),i=a(8);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[n.i,i,""]]);var r={insert:"head",singleton:!1},o=(e(i,r),i.locals?i.locals:{});n.exports=o},function(n,t,a){"use strict";var e,i=function(){return void 0===e&&(e=Boolean(window&&document&&document.all&&!window.atob)),e},r=function(){var n={};return function(t){if(void 0===n[t]){var a=document.querySelector(t);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(n){a=null}n[t]=a}return n[t]}}(),o=[];function l(n){for(var t=-1,a=0;a<o.length;a++)if(o[a].identifier===n){t=a;break}return t}function s(n,t){for(var a={},e=[],i=0;i<n.length;i++){var r=n[i],s=t.base?r[0]+t.base:r[0],p=a[s]||0,f="".concat(s," ").concat(p);a[s]=p+1;var m=l(f),d={css:r[1],media:r[2],sourceMap:r[3]};-1!==m?(o[m].references++,o[m].updater(d)):o.push({identifier:f,updater:k(d,t),references:1}),e.push(f)}return e}function p(n){var t=document.createElement("style"),e=n.attributes||{};if(void 0===e.nonce){var i=a.nc;i&&(e.nonce=i)}if(Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])})),"function"==typeof n.insert)n.insert(t);else{var o=r(n.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}return t}var f,m=(f=[],function(n,t){return f[n]=t,f.filter(Boolean).join("\n")});function d(n,t,a,e){var i=a?"":e.media?"@media ".concat(e.media," {").concat(e.css,"}"):e.css;if(n.styleSheet)n.styleSheet.cssText=m(t,i);else{var r=document.createTextNode(i),o=n.childNodes;o[t]&&n.removeChild(o[t]),o.length?n.insertBefore(r,o[t]):n.appendChild(r)}}function b(n,t,a){var e=a.css,i=a.media,r=a.sourceMap;if(i?n.setAttribute("media",i):n.removeAttribute("media"),r&&btoa&&(e+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}var c=null,u=0;function k(n,t){var a,e,i;if(t.singleton){var r=u++;a=c||(c=p(t)),e=d.bind(null,a,r,!1),i=d.bind(null,a,r,!0)}else a=p(t),e=b.bind(null,a,t),i=function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(a)};return e(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;e(n=t)}else i()}}n.exports=function(n,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=i());var a=s(n=n||[],t);return function(n){if(n=n||[],"[object Array]"===Object.prototype.toString.call(n)){for(var e=0;e<a.length;e++){var i=l(a[e]);o[i].references--}for(var r=s(n,t),p=0;p<a.length;p++){var f=l(a[p]);0===o[f].references&&(o[f].updater(),o.splice(f,1))}a=r}}}},function(n,t,a){(t=a(9)(!1)).push([n.i,'@-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