From 6efc3545ccca2bcb0aaf219b2a9ff1c4f06e9e91 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Wed, 25 Nov 2020 00:10:33 +0800
Subject: loader
---
deploy/index.html | 20 ++++++++
deploy/loader.css | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 161 insertions(+)
create mode 100644 deploy/loader.css
(limited to 'deploy')
diff --git a/deploy/index.html b/deploy/index.html
index 282acc0ce..7b68af2ef 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -4,12 +4,32 @@
Dash Web
+
+
+
diff --git a/deploy/loader.css b/deploy/loader.css
new file mode 100644
index 000000000..065862013
--- /dev/null
+++ b/deploy/loader.css
@@ -0,0 +1,141 @@
+.dash-loader {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ background-color: lightcyan;
+ z-index: 10;
+ width: 100%;
+ height: 100%;
+}
+
+.dash-loader-container {
+ width: 100;
+ align-self: center;
+}
+
+.dash-d-path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: dash-d-path 10s linear infinite;
+}
+
+@keyframes dash-d-path {
+ 0% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 10% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 90% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 100% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+}
+
+.dash-a-path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: dash-a-path 10s linear infinite;
+}
+
+@keyframes dash-a-path {
+ 0% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 7% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 17% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 90% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 100% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+}
+
+.dash-s-path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: dash-s-path 10s linear infinite;
+}
+
+@keyframes dash-s-path {
+ 0% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 14% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 20% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 90% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 100% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+}
+
+.dash-h-path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: dash-h-path 10s linear infinite;
+}
+
+@keyframes dash-h-path {
+ 0% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 18% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+
+ 28% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 90% {
+ stroke-dashoffset: 0;
+ /* stroke-width: 20px; */
+ }
+
+ 100% {
+ stroke-dashoffset: 1000;
+ /* stroke-width: 0px; */
+ }
+}
\ No newline at end of file
--
cgit v1.2.3-70-g09d2