spin 300

Author: Vineeth T R

Diff for: js/loaders/circle.js

@@ -77,6 +77,7 @@ export const CIRCLE = [
         100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
     }`,
   },
+ 
   {
   id: "spin-fllwBRbease4jr",
   html: `<span class="loader"></span>`,
@@ -1889,6 +1890,32 @@ export const CIRCLE = [
   }
       `,
     },
+  {
+    id: "ringMolt",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.loader:before , .loader:after{
+  content: '';
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+}
+.loader:after {
+  box-shadow: 0 2px 0 #FF3D00 inset;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  0% {  transform: rotate(0)}
+  100% { transform: rotate(360deg)}
+}`,
+    },
 
 
 

Diff for: js/loaders/line.js

@@ -278,11 +278,55 @@ export const LINE = [
 @keyframes animloader {
     0% { width: 4.8px }
     100% { width: 48px}
-}`,
-    }, {
-        id: "zdy2kji5lvp",
-        html: `<span class="loader"></span>`,
-        css: `.loader {
+}
+`,
+}, 
+  {
+    id: "linSpiLox",
+    html: `<span class="loader"></span>`,
+    css: `.loader {
+  color: #FFF;
+  position: relative;
+  font-size: 11px;
+  background: #FFF;
+  animation: escaleY 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 2em;
+  background: #FFF;
+  width: 1em;
+  height: 4em;
+  animation: escaleY 1s infinite ease-in-out;
+}
+.loader:before {
+  left: -2em;
+  animation-delay: -0.32s;
+}
+
+@keyframes escaleY {
+  0%, 80%, 100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+`,
+}, 
+    
+{
+  id: "zdy2kji5lvp",
+  html: `<span class="loader"></span>`,
+  css: `.loader {
   width: 8px;
   height: 48px;
   display: inline-block;

Diff for: js/loaders/progress.js

@@ -752,6 +752,52 @@ export const PROGRESS = [
     100% {  left: 100%; transform: translateX(-100%); }
   }
   `,
+},
+  {
+    id: "toBlrSpn",
+    html: `<span class="loader"></span>`,
+    css: `.loader{
+  width: 200px;
+  height: 40px;
+  background-color: #0004;
+  position: relative;
+  border-radius: 50px;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);
+}
+.loader:after {
+  border-radius: 50px;
+  content: "";
+  position: absolute;
+  background-color: #fff;
+  left: 2px;
+  top: 2px;
+  bottom: 2px;
+  right: 360px;
+  animation: slide 2s linear infinite;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes slide {
+  0% {
+    right: 150px;
+    left: 2px;
+  }
+  5% {
+    left: 2px;
+  }
+  50% {
+    right: 2px;
+    left: 150px;
+  }
+  55% {
+    right: 2px;
+  }
+  100% {
+    right: 150px;
+    left: 2px;
+  }
+}
+  `,
 },
 {
     id: "toggleBallSlider2Xqr",