From 69f247903d289aeac6383ba3a6912504a6172873 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 2 Dec 2020 18:34:23 +0800 Subject: loader progress bar (superficial) - temp media changes --- deploy/index.html | 83 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 68 insertions(+), 15 deletions(-) (limited to 'deploy/index.html') diff --git a/deploy/index.html b/deploy/index.html index beb7dd205..4e0c2dfa4 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -13,20 +13,51 @@ align-content: center; justify-content: center; background-color: #AEDDF8; + transition: 3s; z-index: 10; width: 100vw; height: 100vh; } .dash-loader-container { - width: 20vw; - height: 20vw; + display: grid; + grid-auto-rows: auto 30px auto; + } + + .dash-progress-bar { + width: 200px; + height: 5px; + align-self: center; + margin-top: 20px; + background-color: #ececec; + border-radius: 5px; + overflow: hidden; + } + + .dash-progress { + width: 0%; + height: 20px; + background-color: #5b9fdd; + transition: 0.1s; + } + + .dash-animation-container { + width: 10vw; + height: 10vw; display: flex; align-items: center; justify-content: center; border-radius: 100%; background-color: #5B9FDD; - align-self: center; + justify-self: center; + align-self: flex-end; + } + + .dash-loader-text { + font-size: 15px; + font-family: "Roboto"; + text-align: center; + color: #5B9FDD; } .dash-d-path { @@ -38,41 +69,63 @@ @keyframes dash-d-path { 0% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } 20% { stroke-dashoffset: 0; - /* stroke-width: 20px; */ } 70% { stroke-dashoffset: 0; - /* stroke-width: 20px; */ } 90% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } 100% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } } -
+
- - - +
+ + + +
+
+
+
+ +
+
+ Loading Dash... +
-- cgit v1.2.3-70-g09d2