new spinner

index.html

@@ -95,7 +95,18 @@ <h5><ul class="inner-links">
 				</h5>
 			</div>
 			<figure class="entry__media">
-				<div class="loader"></div>
+				<div class="loader-row">
+					<div>
+						<div class="loader"></div>
+					</div>
+					<div>
+						<div class="loader2 ">
+							<svg height="100" width="100">
+								<circle cx="50" cy="52" r="32"/>
+							  </svg> 
+						</div>
+					</div>
+				</div>
 
 			</figure>
 		</div>

style.css

@@ -560,6 +560,45 @@
 
 		}
 
+		.loader2 svg circle{
+			/* fill:none;
+			stroke: red; */
+			animation: 2s ease infinite alternate animate-circle;
+
+		}
+
+		.loader-row {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 200px;
+			gap: 2rem;
+		  }
+
+
+		@keyframes animate-circle {
+			0%,20%{
+				fill: transparent;
+				stroke: red;
+				stroke-width: 7;
+				stroke-dashoffset: 35%;
+				stroke-dasharray: 0 52%;
+			}
+			30%{
+				fill: transparent;
+				stroke: rgb(47, 0, 255);
+				stroke-width: 7;
+			}
+			80%,100%{
+				fill: transparent;
+				stroke: red;
+				stroke-width: 7;
+				stroke-dashoffset: -25%;
+				stroke-dasharray:  22% 0;
+
+			}
+		}
+
 		@keyframes spinner {
 
 			/* optional bc default values
@@ -569,6 +608,7 @@
 			*/
 			to{
 				transform: rotate(1turn) scale(1.2);
+
 			}
 		}
 
@@ -602,6 +642,9 @@
 			letter-spacing: -6px;
 			font-family: 'Poppins', sans-serif;
 		}
+
+
+
 		.text_loader svg text.text-body{
 			stroke: var(--loader-text-color);
 			animation: 4s infinite alternate animate-stroke;