Login + DELoader Prototype

2 files changed, 110 insertions, 29 deletions

diff --git a/css/globals.css b/css/globals.css
index 9798fcc..5820939 100644
--- a/css/globals.css
+++ b/css/globals.css
@@ -2,3 +2,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
+#loginSelector, #loadingDesktopExperience {
+    display: none;
+}
diff --git a/css/layouts.css b/css/layouts.css
index 31a424c..cb96025 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -1,58 +1,135 @@
 .fullscreen {
-    width: 100%;
-    height: 100vh;
-    max-width: 100%;
-    max-height: 100vh;
-    z-index: 1;
-    position: relative;
-    overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  max-height: 100vh;
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
 }
 
 .fullscreen_centered {
-    z-index: 2;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .height_100-55 {
-    height: calc(100% - 55px);
+  height: calc(100% - 55px);
 }
 
 .mediumbox {
-    width: 60vh;
-    max-height: auto;
+  width: 60vh;
+  max-height: auto;
 }
 
 .padding_25 {
-    padding: 25px;
+  padding: 25px;
 }
 
 .bordered_4px {
-    border: 4px solid #383838;
+  border: 4px solid #383838;
 }
 
 .center_text {
-    text-align: center;
+  text-align: center;
 }
 
 .justify_text {
-    text-align: justify;
+  text-align: justify;
 }
 
 .image_block {
-    width: 128px;
-    height: 128px;
-    background-color: #b9b9b9;
-    display: inline-block;
-    margin-right: 20px;
-    cursor: pointer;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+  width: 128px;
+  height: 128px;
+  background-color: #b9b9b9;
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .form_elements {
-    margin-top: 20px;
+  margin-top: 20px;
+}
+
+.meter {
+  height: 20px; /* Can be anything */
+  position: relative;
+  /* background: #555; */
+  -moz-border-radius: 25px;
+  -webkit-border-radius: 25px;
+  border-radius: 25px;
+  /* padding: 10px; */
+  /* box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); */
+}
+
+.meter > span {
+  display: block;
+  height: 100%;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background-color: rgb(80, 80, 80);
+  background-image: linear-gradient(
+    center bottom,
+    rgb(43, 194, 83) 37%,
+    rgb(84, 240, 84) 69%
+  );
+  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+  position: relative;
+  overflow: hidden;
+  transition-duration: 500ms;
+}
+
+.meter > span:after,
+.animate > span > span {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  z-index: 1;
+  background-size: 50px 50px;
+  animation: move 2s linear infinite;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  overflow: hidden;
+}
+
+.animate > span:after {
+  display: none;
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
+.meter > span:after,
+.animate > span > span {
+  animation: move 2s linear infinite;
 }