From 52dc75fb7847a83c1c3b5c06955a7fcb8d7c6036 Mon Sep 17 00:00:00 2001 From: Vineeth T R Date: Sun, 31 Oct 2021 10:59:20 +0530 Subject: [PATCH] rearrange --- css/workshop.css | 6 ++ js/loaders/bubble.js | 56 +++++++++++++ js/loaders/graph.js | 42 +--------- js/loaders/objects.js | 188 +++++++++++++++++++----------------------- js/loaders/rect.js | 62 ++++++++++++++ scss/workshop.scss | 10 ++- 6 files changed, 218 insertions(+), 146 deletions(-) diff --git a/css/workshop.css b/css/workshop.css index d0e5eff0..acfc5e9b 100644 --- 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 index 106d9803..200a081a 100644 --- a/js/loaders/bubble.js +++ b/js/loaders/bubble.js @@ -649,6 +649,62 @@ export const BUBBLE = [ } `, }, + { + id: "ballCrdLd", + html: ``, + 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 index 43aa0b78..edf36227 100644 --- a/js/loaders/graph.js +++ b/js/loaders/graph.js @@ -159,47 +159,7 @@ export const GRAPH = [ } `, }, - { - id: "sprLgLdg", - html: ``, - 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 index 5f5ba34c..0bd40413 100644 --- a/js/loaders/objects.js +++ b/js/loaders/objects.js @@ -1,64 +1,5 @@ export const OBJECTS = [ - { - id: "stackLyrXp", - html: ``, - 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: ``, - 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: ``, + 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: ``, + 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: ``, - 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)} -} -`, - }, + ] \ No newline at end of file diff --git a/js/loaders/rect.js b/js/loaders/rect.js index f2a072b7..579f677d 100644 --- a/js/loaders/rect.js +++ b/js/loaders/rect.js @@ -1017,6 +1017,68 @@ export const RECT = [ `, }, + + { + id: "stackLyrXp", + html: ``, + 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: ``, + 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: "prima-split-rects", html: ``, diff --git a/scss/workshop.scss b/scss/workshop.scss index 38cffa27..bfd56c89 100644 --- a/scss/workshop.scss +++ b/scss/workshop.scss @@ -45,8 +45,14 @@ body { // ==========2===== -.md-2 { - +.md-1 { +.loader { + position: relative; + width: 100px; + height: 16px; + } + + } // ==========3=====