rearrange

vineethtrv · Oct 31, 2021 · 52dc75f · 52dc75f
1 parent 42b9337
commit 52dc75f
Show file tree

Hide file tree

Showing 6 changed files with 218 additions and 146 deletions.
diff --git a/css/workshop.css b/css/workshop.css
@@ -40,6 +40,12 @@ body section:nth-child(2n + 1) {
   background: rgba(0, 0, 0, 0.1);
 }
 
+.md-1 .loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+}
+
 .md-0 .loader {
   position: relative;
   width: 64px;

diff --git a/js/loaders/bubble.js b/js/loaders/bubble.js
@@ -649,6 +649,62 @@ export const BUBBLE = [
   }
       `,
     },
+  {
+    id: "ballCrdLd",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+}
+.loader:before , .loader:after{
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 32px 0 #fff;
+  left: 0;
+  top: 0;
+  animation: ballMoveX 2s linear infinite;
+}
+.loader:after {
+  box-shadow: none;
+  transform: translateX(64px) scale(1);
+  z-index: 2;
+  animation: none;
+  animation: trfLoader 2s linear infinite;
+}
+
+@keyframes trfLoader {
+  0% , 5%{
+    transform: translateX(64px) scale(1);
+    background: #FFF;
+  }
+  10%{
+    transform: translateX(64px) scale(1);
+    background: #ff3d00;
+  }
+  40%{
+      transform: translateX(32px) scale(1.5);
+      background: #ff3d00;
+    }
+  90%, 95% {
+    transform: translateX(0px) scale(1);
+    background: #ff3d00;
+  }
+  100% {
+    transform: translateX(0px) scale(1);
+    background: #FFF;
+  }
+}
+@keyframes ballMoveX {
+  0% , 10%{  transform: translateX(0) }
+  90%, 100% { transform: translateX(32px) }
+}
+      `,
+    },
 
   {
     id: "ball4puncUp",

diff --git a/js/loaders/graph.js b/js/loaders/graph.js
@@ -159,47 +159,7 @@ export const GRAPH = [
 }
 `,
   },
-  {
-    id: "sprLgLdg",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    width: 150px;
-    height: 150px;
-    background-color: #ff3d00;
-    border-radius: 50%;
-    position: relative;
-    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
-      0 5px 12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 45%;
-    top: -40%;
-    background-color: #fff;
-    animation: wave 5s linear infinite;
-  }
-  .loader:before {
-    border-radius: 30%;
-    background: rgba(255, 255, 255, 0.4);
-    animation: wave 5s linear infinite;
-  }
-  @keyframes wave {
-    0% {
-      transform: rotate(0);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`,
-  },
-
-
+
 
   {
     id: "gHomeChrgLdingFlash",

diff --git a/js/loaders/objects.js b/js/loaders/objects.js
@@ -1,64 +1,5 @@
 export const OBJECTS = [
-  {
-    id: "stackLyrXp",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-    position: relative;
-    width:  48px;
-    height: 48px;
-    background: #de3500;
-    transform: rotateX(65deg) rotate(45deg);
-    // remove bellows command for perspective change
-    //transform: perspective(200px) rotateX(65deg) rotate(45deg); 
-    color: #fff;
-    animation: layers1 1s linear infinite alternate;
-  }
-  .loader:after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.7);
-    animation: layerTr 1s linear infinite alternate;
-  }
 
-  @keyframes layers1 {
-    0% { box-shadow: 0px 0px 0 0px  }
-   90% , 100% { box-shadow: 20px 20px 0 -4px  }
-  }
-  @keyframes layerTr {
-    0% { transform:  translate(0, 0) scale(1) }
-    100% {  transform: translate(-25px, -25px) scale(1) }
-  }
-      `,
-  },
-  {
-    id: "sqrBxRol",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  background: #de3500;
-  width: 48px;
-  height: 48px;
-  position: relative;
-  text-align: center;
-  animation: 3s rotate linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: #FFFF;
-  animation: 1.5s rotate reverse linear infinite ;
-
-}
-@keyframes rotate {
-  0%{    transform: rotate(0deg)}
-  100%{    transform: rotate(360deg)}
-}
-      `,
-  },
 
   {
     id: "linQbFll",
@@ -2081,6 +2022,90 @@ export const OBJECTS = [
 }
 `,
     },
+  {
+    id: "sprLgLdg",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+    width: 150px;
+    height: 150px;
+    background-color: #ff3d00;
+    border-radius: 50%;
+    position: relative;
+    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
+      0 5px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+  }
+  .loader:before,
+  .loader:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 45%;
+    top: -40%;
+    background-color: #fff;
+    animation: wave 5s linear infinite;
+  }
+  .loader:before {
+    border-radius: 30%;
+    background: rgba(255, 255, 255, 0.4);
+    animation: wave 5s linear infinite;
+  }
+  @keyframes wave {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`,
+  },
+
+  {
+    id: "cheLoad",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  width: 96px;
+  box-sizing: content-box;
+  height: 48px;
+  background: #FFF;
+  border-color: #de3500;
+  border-style: solid;
+  border-width: 2px 2px 50px 2px;
+  border-radius: 100%;
+  position: relative;
+  animation: 3s yinYang linear infinite;
+}
+.loader:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  background: #FFF;
+  border: 18px solid #de3500;
+  border-radius: 100%;
+  width: 12px;
+  height: 12px;
+  box-sizing: content-box;
+}
+.loader:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #de3500;
+  border: 18px solid #FFF;
+  border-radius: 100%;
+  width: 12px;
+  height: 12px;
+  box-sizing: content-box;
+}
+@keyframes yinYang {
+  100%{transform: rotate(360deg)}
+}
+`,
+  },
 
   {
   id: "mouseScrDwn",
@@ -2798,48 +2823,5 @@ export const OBJECTS = [
 }
 `,
   },
-  {
-    id: "cheLoad",
-    html: `<span class="loader"></span>`,
-    css: `.loader {
-  width: 96px;
-  box-sizing: content-box;
-  height: 48px;
-  background: #FFF;
-  border-color: #de3500;
-  border-style: solid;
-  border-width: 2px 2px 50px 2px;
-  border-radius: 100%;
-  position: relative;
-  animation: 3s yinYang linear infinite;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 0;
-  background: #FFF;
-  border: 18px solid #de3500;
-  border-radius: 100%;
-  width: 12px;
-  height: 12px;
-  box-sizing: content-box;
-}
-.loader:after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background: #de3500;
-  border: 18px solid #FFF;
-  border-radius: 100%;
-  width: 12px;
-  height: 12px;
-  box-sizing: content-box;
-}
-@keyframes yinYang {
-  100%{transform: rotate(360deg)}
-}
-`,
-  },
+
 ]