add blasting-ripple loader

mehidi258 · mehidi258 · commit 84aef9ccd1dd · 2019-10-10T11:20:26.000+06:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 .DS_Store
 node_modules
 dist/
+.idea/
diff --git a/index.html b/index.html
@@ -12,12 +12,23 @@
     <link rel="stylesheet" href="spinners/blasting-circle/blasting-circle.css">
     <link rel="stylesheet" href="spinners/rotating-plane/rotating-plane.css">
     <link rel="stylesheet" href="spinners/bouncing-circle/bouncing-circle.css">
+    <link rel="stylesheet" href="spinners/blasting-ripple/blasting-ripple.css">
+
+    <style>
+        .spinner, .ripple {
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
 <body>
     <h1>This is just a sample page, Homepage is under construction</h1>
     <div class="spinner circle"></div>
     <div class="spinner blasting-circle"></div>
     <div class="spinner rotating-plane"></div>
-    <div class="spinner bouncing-circle"></div>    
+    <div class="spinner bouncing-circle"></div>
+    <div class="ripple blasting-ripple">
+        <div></div>
+        <div></div>
+    </div>
 </body>
 </html>
diff --git a/spinners/blasting-ripple/blasting-ripple.css b/spinners/blasting-ripple/blasting-ripple.css
@@ -0,0 +1,35 @@
+@keyframes blast-ripple {
+    0% {
+        top: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
+        left: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: -1px;
+        left: -1px;
+        width: calc(var(--spinner-width, 100px) - var(--line-width, 4px) );
+        height: calc(var(--spinner-width, 100px) - var(--line-width, 4px) );
+        opacity: 0;
+    }
+}
+
+.ripple.blasting-ripple {
+    display: inline-block;
+    position: relative;
+    width: var(--spinner-width, 100px);
+    height: var(--spinner-width, 100px);
+}
+
+.ripple div {
+    position: absolute;
+    border: var(--line-width, 4px) solid var(--spinner-color-primary, #00f);
+    opacity: 1;
+    border-radius: 50%;
+    animation: blast-ripple var(--animation-duration, 0.5s) cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+}
