From bedc68610fe2921329ee3f29e9a354923a876920 Mon Sep 17 00:00:00 2001
From: totaro <66010583+totaro@users.noreply.github.com>
Date: Wed, 10 Jan 2024 17:02:43 +0200
Subject: [PATCH] new spinner

---
 index.html | 13 ++++++++++++-
 style.css  | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9ca7065..ce21d0f 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index af7540d..7cc1a65 100644
--- a/style.css
+++ b/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;