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: "",
+ 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:
+ *
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+