From 35a4c2ab5a5777c5de7d59e9d73cfdbc964e8786 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Mon, 22 Jul 2019 21:56:47 +0100 Subject: [PATCH] Added a loading screen for Ombi --- src/Ombi/ClientApp/angular.json | 5 +- src/Ombi/ClientApp/package.json | 2 + src/Ombi/ClientApp/src/app/app.component.ts | 1 + .../app/wizard/welcome/welcome.component.html | 3 +- src/Ombi/ClientApp/src/index.html | 25 +- src/Ombi/ClientApp/yarn.lock | 10 + src/Ombi/wwwroot/styles/11-folding-cube.css | 85 ++ src/Ombi/wwwroot/styles/please-wait.css | 161 ++++ src/Ombi/wwwroot/styles/please-wait.js | 292 +++++++ src/Ombi/wwwroot/styles/spinkit.css | 770 ++++++++++++++++++ 10 files changed, 1351 insertions(+), 3 deletions(-) create mode 100644 src/Ombi/wwwroot/styles/11-folding-cube.css create mode 100644 src/Ombi/wwwroot/styles/please-wait.css create mode 100644 src/Ombi/wwwroot/styles/please-wait.js create mode 100644 src/Ombi/wwwroot/styles/spinkit.css diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json index ecad176c9..d337267ba 100644 --- a/src/Ombi/ClientApp/angular.json +++ b/src/Ombi/ClientApp/angular.json @@ -32,7 +32,10 @@ "node_modules/primeng/resources/primeng.min.css", "node_modules/primeng/resources/themes/nova-light/theme.css", "node_modules/primeicons/primeicons.css", - "node_modules/fullcalendar/dist/fullcalendar.min.css" + "node_modules/fullcalendar/dist/fullcalendar.min.css", + "node_modules/please-wait/src/please-wait.scss", + "node_modules/spinkit/scss/spinners/11-folding-cube.scss", + "node_modules/spinkit/scss/spinkit.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json index 6cb37e758..1799faab4 100644 --- a/src/Ombi/ClientApp/package.json +++ b/src/Ombi/ClientApp/package.json @@ -52,11 +52,13 @@ "ngx-order-pipe": "^2.0.1", "ngx-page-scroll": "^5.0.1", "pace": "github:HubSpot/pace#v1.0.2", + "please-wait": "^0.0.5", "popper.js": "^1.14.3", "primeicons": "^1.0.0", "primeng": "^7.0.3", "rxjs": "^6.5.2", "socket.io-client": "^2.2.0", + "spinkit": "^1.2.5", "store": "^2.0.12", "sweetalert2": "^7.33.1", "tslint-angular": "^1.1.2", diff --git a/src/Ombi/ClientApp/src/app/app.component.ts b/src/Ombi/ClientApp/src/app/app.component.ts index c883208bc..732c94d47 100644 --- a/src/Ombi/ClientApp/src/app/app.component.ts +++ b/src/Ombi/ClientApp/src/app/app.component.ts @@ -75,6 +75,7 @@ export class AppComponent implements OnInit { } public ngOnInit() { + window["loading_screen"].finish(); const theme = this.storage.get("theme"); this.onSetTheme(theme); diff --git a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html index c278593ac..054250ec7 100644 --- a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html +++ b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html @@ -1,4 +1,4 @@ - +
@@ -15,3 +15,4 @@
+ diff --git a/src/Ombi/ClientApp/src/index.html b/src/Ombi/ClientApp/src/index.html index d49c1783c..ffa026566 100644 --- a/src/Ombi/ClientApp/src/index.html +++ b/src/Ombi/ClientApp/src/index.html @@ -15,6 +15,10 @@ console.log(base); + + + + @@ -25,7 +29,26 @@ console.log(base); -

Loading...

+ diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock index 942e57d99..d71e95589 100644 --- a/src/Ombi/ClientApp/yarn.lock +++ b/src/Ombi/ClientApp/yarn.lock @@ -4570,6 +4570,11 @@ pkg-dir@^3.0.0: dependencies: find-up "^3.0.0" +please-wait@^0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/please-wait/-/please-wait-0.0.5.tgz#67098ce6260e92e0809e2d3b7c23f1d167dad960" + integrity sha1-ZwmM5iYOkuCAni07fCPx0Wfa2WA= + popper.js@^1.14.3: version "1.14.6" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0" @@ -5636,6 +5641,11 @@ speed-measure-webpack-plugin@1.3.1: dependencies: chalk "^2.0.1" +spinkit@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/spinkit/-/spinkit-1.2.5.tgz#90f9f466a20e8e39ef24da959c1e611c2a30dd54" + integrity sha1-kPn0ZqIOjjnvJNqVnB5hHCow3VQ= + split-string@^3.0.1, split-string@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2" diff --git a/src/Ombi/wwwroot/styles/11-folding-cube.css b/src/Ombi/wwwroot/styles/11-folding-cube.css new file mode 100644 index 000000000..c41a519c5 --- /dev/null +++ b/src/Ombi/wwwroot/styles/11-folding-cube.css @@ -0,0 +1,85 @@ +/* + * Usage: + * +
+
+
+
+
+
+ * + */ +.sk-folding-cube { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); } + .sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #333; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; } + +@-webkit-keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } + +@keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } diff --git a/src/Ombi/wwwroot/styles/please-wait.css b/src/Ombi/wwwroot/styles/please-wait.css new file mode 100644 index 000000000..4399a2a04 --- /dev/null +++ b/src/Ombi/wwwroot/styles/please-wait.css @@ -0,0 +1,161 @@ +/* line 17, ../src/please-wait.scss */ +body.pg-loading { + overflow: hidden; +} + +/* line 21, ../src/please-wait.scss */ +.pg-loading-screen { + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 1000000; + opacity: 1; + background-color: #FFF; + -webkit-transition: background-color 0.4s ease-in-out 0s; + -moz-transition: background-color 0.4s ease-in-out 0s; + -ms-transition: background-color 0.4s ease-in-out 0s; + -o-transition: background-color 0.4s ease-in-out 0s; + transition: background-color 0.4s ease-in-out 0s; +} +/* line 32, ../src/please-wait.scss */ +.pg-loading-screen.pg-loaded { + opacity: 0; + -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; + -moz-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; + -ms-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; + -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; + animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; +} +/* line 38, ../src/please-wait.scss */ +.pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html { + opacity: 1; +} +/* line 42, ../src/please-wait.scss */ +.pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html:not(.pg-loaded) { + -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; + -moz-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; + -ms-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; + -o-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; + animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; +} +/* line 46, ../src/please-wait.scss */ +.pg-loading-screen.pg-loading .pg-loading-html:not(.pg-loaded) { + -webkit-animation-delay: 0.3s; + -moz-animation-delay: 0.3s; + -ms-animation-delay: 0.3s; + -o-animation-delay: 0.3s; + animation-delay: 0.3s; +} +/* line 51, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-inner { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + position: static; +} +/* line 59, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-center-outer { + width: 100%; + padding: 0; + display: table !important; + height: 100%; + position: absolute; + top: 0; + left: 0; + margin: 0; +} +/* line 70, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-center-middle { + padding: 0; + vertical-align: middle; + display: table-cell !important; + margin: 0; + text-align: center; +} +/* line 78, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-logo-header, .pg-loading-screen .pg-loading-html { + width: 100%; + opacity: 0; +} +/* line 83, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-logo-header { + text-align: center; +} +/* line 86, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-logo-header img { + display: inline-block !important; +} +/* line 91, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-html { + margin-top: 90px; +} +/* line 94, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-html.pg-loaded { + -webkit-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); + -moz-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); + -ms-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); + -o-transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); + transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); +} +/* line 97, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-html.pg-loaded.pg-removing { + opacity: 0; +} +/* line 101, ../src/please-wait.scss */ +.pg-loading-screen .pg-loading-html.pg-loaded.pg-loading { + opacity: 1; +} + +@-webkit-keyframes pgAnimLoading { + from { + opacity: 0; + } +} +@-moz-keyframes pgAnimLoading { + from { + opacity: 0; + } +} +@-o-keyframes pgAnimLoading { + from { + opacity: 0; + } +} +@-ms-keyframes pgAnimLoading { + from { + opacity: 0; + } +} +@keyframes pgAnimLoading { + from { + opacity: 0; + } +} +@-webkit-keyframes pgAnimLoaded { + from { + opacity: 1; + } +} +@-moz-keyframes pgAnimLoaded { + from { + opacity: 1; + } +} +@-o-keyframes pgAnimLoaded { + from { + opacity: 1; + } +} +@-ms-keyframes pgAnimLoaded { + from { + opacity: 1; + } +} +@keyframes pgAnimLoaded { + from { + opacity: 1; + } +} diff --git a/src/Ombi/wwwroot/styles/please-wait.js b/src/Ombi/wwwroot/styles/please-wait.js new file mode 100644 index 000000000..6d73f3381 --- /dev/null +++ b/src/Ombi/wwwroot/styles/please-wait.js @@ -0,0 +1,292 @@ +/** +* please-wait +* Display a nice loading screen while your app loads + +* @author Pathgather +* @copyright Pathgather 2015 +* @license MIT +* @link https://github.com/Pathgather/please-wait +* @module please-wait +* @version 0.0.5 +*/ +(function(root, factory) { + if (typeof exports === "object") { + factory(exports); + } else if (typeof define === "function" && define.amd) { + define(["exports"], factory); + } else { + factory(root); + } +})(this, function(exports) { + var PleaseWait, addClass, animationEvent, animationSupport, domPrefixes, elm, key, pfx, pleaseWait, removeClass, transEndEventNames, transitionEvent, transitionSupport, val, _i, _len; + elm = document.createElement('fakeelement'); + animationSupport = false; + transitionSupport = false; + animationEvent = 'animationend'; + transitionEvent = null; + domPrefixes = 'Webkit Moz O ms'.split(' '); + transEndEventNames = { + 'WebkitTransition': 'webkitTransitionEnd', + 'MozTransition': 'transitionend', + 'OTransition': 'oTransitionEnd', + 'msTransition': 'MSTransitionEnd', + 'transition': 'transitionend' + }; + for (key in transEndEventNames) { + val = transEndEventNames[key]; + if (elm.style[key] != null) { + transitionEvent = val; + transitionSupport = true; + break; + } + } + if (elm.style.animationName != null) { + animationSupport = true; + } + if (!animationSupport) { + for (_i = 0, _len = domPrefixes.length; _i < _len; _i++) { + pfx = domPrefixes[_i]; + if (elm.style["" + pfx + "AnimationName"] != null) { + switch (pfx) { + case 'Webkit': + animationEvent = 'webkitAnimationEnd'; + break; + case 'Moz': + animationEvent = 'animationend'; + break; + case 'O': + animationEvent = 'oanimationend'; + break; + case 'ms': + animationEvent = 'MSAnimationEnd'; + } + animationSupport = true; + break; + } + } + } + addClass = function(classname, elem) { + if (elem.classList) { + return elem.classList.add(classname); + } else { + return elem.className += " " + classname; + } + }; + removeClass = function(classname, elem) { + if (elem.classList) { + return elem.classList.remove(classname); + } else { + return elem.className = elem.className.replace(classname, "").trim(); + } + }; + PleaseWait = (function() { + PleaseWait._defaultOptions = { + backgroundColor: null, + logo: null, + loadingHtml: null, + template: "
\n
\n
\n

\n \n

\n
\n
\n
\n
\n
", + onLoadedCallback: null + }; + + function PleaseWait(options) { + var defaultOptions, k, listener, v; + defaultOptions = this.constructor._defaultOptions; + this.options = {}; + this.loaded = false; + this.finishing = false; + for (k in defaultOptions) { + v = defaultOptions[k]; + this.options[k] = options[k] != null ? options[k] : v; + } + this._loadingElem = document.createElement("div"); + this._loadingHtmlToDisplay = []; + this._loadingElem.className = "pg-loading-screen"; + if (this.options.backgroundColor != null) { + this._loadingElem.style.backgroundColor = this.options.backgroundColor; + } + this._loadingElem.innerHTML = this.options.template; + this._loadingHtmlElem = this._loadingElem.getElementsByClassName("pg-loading-html")[0]; + if (this._loadingHtmlElem != null) { + this._loadingHtmlElem.innerHTML = this.options.loadingHtml; + } + this._readyToShowLoadingHtml = false; + this._logoElem = this._loadingElem.getElementsByClassName("pg-loading-logo")[0]; + if (this._logoElem != null) { + this._logoElem.src = this.options.logo; + } + removeClass("pg-loaded", document.body); + addClass("pg-loading", document.body); + document.body.appendChild(this._loadingElem); + addClass("pg-loading", this._loadingElem); + this._onLoadedCallback = this.options.onLoadedCallback; + listener = (function(_this) { + return function(evt) { + _this.loaded = true; + _this._readyToShowLoadingHtml = true; + addClass("pg-loaded", _this._loadingHtmlElem); + if (animationSupport) { + _this._loadingHtmlElem.removeEventListener(animationEvent, listener); + } + if (_this._loadingHtmlToDisplay.length > 0) { + _this._changeLoadingHtml(); + } + if (_this.finishing) { + if (evt != null) { + evt.stopPropagation(); + } + return _this._finish(); + } + }; + })(this); + if (this._loadingHtmlElem != null) { + if (animationSupport) { + this._loadingHtmlElem.addEventListener(animationEvent, listener); + } else { + listener(); + } + this._loadingHtmlListener = (function(_this) { + return function() { + _this._readyToShowLoadingHtml = true; + removeClass("pg-loading", _this._loadingHtmlElem); + if (transitionSupport) { + _this._loadingHtmlElem.removeEventListener(transitionEvent, _this._loadingHtmlListener); + } + if (_this._loadingHtmlToDisplay.length > 0) { + return _this._changeLoadingHtml(); + } + }; + })(this); + this._removingHtmlListener = (function(_this) { + return function() { + _this._loadingHtmlElem.innerHTML = _this._loadingHtmlToDisplay.shift(); + removeClass("pg-removing", _this._loadingHtmlElem); + addClass("pg-loading", _this._loadingHtmlElem); + if (transitionSupport) { + _this._loadingHtmlElem.removeEventListener(transitionEvent, _this._removingHtmlListener); + return _this._loadingHtmlElem.addEventListener(transitionEvent, _this._loadingHtmlListener); + } else { + return _this._loadingHtmlListener(); + } + }; + })(this); + } + } + + PleaseWait.prototype.finish = function(immediately, onLoadedCallback) { + if (immediately == null) { + immediately = false; + } + if (window.document.hidden) { + immediately = true; + } + this.finishing = true; + if (onLoadedCallback != null) { + this.updateOption('onLoadedCallback', onLoadedCallback); + } + if (this.loaded || immediately) { + return this._finish(immediately); + } + }; + + PleaseWait.prototype.updateOption = function(option, value) { + switch (option) { + case 'backgroundColor': + return this._loadingElem.style.backgroundColor = value; + case 'logo': + return this._logoElem.src = value; + case 'loadingHtml': + return this.updateLoadingHtml(value); + case 'onLoadedCallback': + return this._onLoadedCallback = value; + default: + throw new Error("Unknown option '" + option + "'"); + } + }; + + PleaseWait.prototype.updateOptions = function(options) { + var k, v, _results; + if (options == null) { + options = {}; + } + _results = []; + for (k in options) { + v = options[k]; + _results.push(this.updateOption(k, v)); + } + return _results; + }; + + PleaseWait.prototype.updateLoadingHtml = function(loadingHtml, immediately) { + if (immediately == null) { + immediately = false; + } + if (this._loadingHtmlElem == null) { + throw new Error("The loading template does not have an element of class 'pg-loading-html'"); + } + if (immediately) { + this._loadingHtmlToDisplay = [loadingHtml]; + this._readyToShowLoadingHtml = true; + } else { + this._loadingHtmlToDisplay.push(loadingHtml); + } + if (this._readyToShowLoadingHtml) { + return this._changeLoadingHtml(); + } + }; + + PleaseWait.prototype._changeLoadingHtml = function() { + this._readyToShowLoadingHtml = false; + this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener); + this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener); + removeClass("pg-loading", this._loadingHtmlElem); + removeClass("pg-removing", this._loadingHtmlElem); + if (transitionSupport) { + addClass("pg-removing", this._loadingHtmlElem); + return this._loadingHtmlElem.addEventListener(transitionEvent, this._removingHtmlListener); + } else { + return this._removingHtmlListener(); + } + }; + + PleaseWait.prototype._finish = function(immediately) { + var listener; + if (immediately == null) { + immediately = false; + } + if (this._loadingElem == null) { + return; + } + addClass("pg-loaded", document.body); + if (typeof this._onLoadedCallback === "function") { + this._onLoadedCallback.apply(this); + } + listener = (function(_this) { + return function() { + document.body.removeChild(_this._loadingElem); + removeClass("pg-loading", document.body); + if (animationSupport) { + _this._loadingElem.removeEventListener(animationEvent, listener); + } + return _this._loadingElem = null; + }; + })(this); + if (!immediately && animationSupport) { + addClass("pg-loaded", this._loadingElem); + return this._loadingElem.addEventListener(animationEvent, listener); + } else { + return listener(); + } + }; + + return PleaseWait; + + })(); + pleaseWait = function(options) { + if (options == null) { + options = {}; + } + return new PleaseWait(options); + }; + exports.pleaseWait = pleaseWait; + return pleaseWait; +}); diff --git a/src/Ombi/wwwroot/styles/spinkit.css b/src/Ombi/wwwroot/styles/spinkit.css new file mode 100644 index 000000000..0b79b8685 --- /dev/null +++ b/src/Ombi/wwwroot/styles/spinkit.css @@ -0,0 +1,770 @@ +/* + * Usage: + * +
+ * + */ +.sk-rotating-plane { + width: 40px; + height: 40px; + background-color: #333; + margin: 40px auto; + -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; + animation: sk-rotatePlane 1.2s infinite ease-in-out; } + +@-webkit-keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + +@keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-double-bounce { + width: 40px; + height: 40px; + position: relative; + margin: 40px auto; } + .sk-double-bounce .sk-child { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; + animation: sk-doubleBounce 2s infinite ease-in-out; } + .sk-double-bounce .sk-double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; } + +@-webkit-keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+ * + */ +.sk-wave { + margin: 40px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; } + .sk-wave .sk-rect { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } + .sk-wave .sk-rect1 { + -webkit-animation-delay: -1.2s; + animation-delay: -1.2s; } + .sk-wave .sk-rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-wave .sk-rect3 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-wave .sk-rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-wave .sk-rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +@-webkit-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-wandering-cubes { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-wandering-cubes .sk-cube { + background-color: #333; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; + animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } + .sk-wandering-cubes .sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + +@-webkit-keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +/* + * Usage: + * + + * + */ +.sk-spinner-pulse { + width: 40px; + height: 40px; + margin: 40px auto; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; + animation: sk-pulseScaleOut 1s infinite ease-in-out; } + +@-webkit-keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } + +@keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-chasing-dots { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + -webkit-animation: sk-chasingDotsRotate 2s infinite linear; + animation: sk-chasingDotsRotate 2s infinite linear; } + .sk-chasing-dots .sk-child { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; + animation: sk-chasingDotsBounce 2s infinite ease-in-out; } + .sk-chasing-dots .sk-dot2 { + top: auto; + bottom: 0; + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +@-webkit-keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+ * + */ +.sk-three-bounce { + margin: 40px auto; + width: 80px; + text-align: center; } + .sk-three-bounce .sk-child { + width: 20px; + height: 20px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; + animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } + .sk-three-bounce .sk-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; } + .sk-three-bounce .sk-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; } + +@-webkit-keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-circle .sk-child { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-circle .sk-child:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; + animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } + .sk-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-cube-grid { + width: 40px; + height: 40px; + margin: 40px auto; + /* + * Spinner positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ } + .sk-cube-grid .sk-cube { + width: 33.33%; + height: 33.33%; + background-color: #333; + float: left; + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } + .sk-cube-grid .sk-cube1 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube2 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube3 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; } + .sk-cube-grid .sk-cube4 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube5 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube6 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube7 { + -webkit-animation-delay: 0.0s; + animation-delay: 0.0s; } + .sk-cube-grid .sk-cube8 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube9 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } + +@keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-fading-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } + .sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +/* + * Usage: + * +
+
+
+
+
+
+ * + */ +.sk-folding-cube { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); } + .sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #333; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; } + +@-webkit-keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } + +@keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } }