spin 297, brand update

Vineeth T R · Vineeth T R · commit 69b991b9ff23 · 2021-11-05T12:48:19.000+05:30
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -55,19 +55,15 @@
 </head>
 <body>
     <header>
-        <span class="brand"> L &nbsp; ader </span>
+        <span class="brand">CSS L &nbsp; aders</span>
 
         <nav>
             <a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
             <a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
         </nav>
     </header>
 
-    <main id="main">
-        <div class="section" id="demo">
-            <span class="loader"></span>
-        </div>
-    </main>
+    <main id="main"></main>
 
 
     <footer>
diff --git a/js/loaders/graph.js b/js/loaders/graph.js
@@ -497,15 +497,18 @@ export const GRAPH = [
 
   {
     id: "pprDltFlp",
-    html: `<span class="loader"></span>`,
+    html: `<span class="loader">Deleting</span>`,
+    content: 'Deleting',
     css: `.loader {
   position: relative;
   background: #ff3d00;
   width: 80px;
   height: 30px;
   line-height: 18px;
   text-align: center;
-  color: #000000;
+  color: #931010;
+  font-weight: 700;
+  letter-spacing: 0.5px;
   font-size: 14px;
   box-sizing: border-box;
   border: 5px groove #de3500;
diff --git a/scss/styles.scss b/scss/styles.scss
@@ -87,17 +87,23 @@ header {
   &::after{
     content: '';
     position: absolute;
-    left: 20px;
+    left: 95px;
     bottom: 7px;
     border: 3px solid $lite;
     border-bottom-color: $brand;
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    animation: rotation 0.6s linear infinite;
+    animation: brandRotation 0.6s linear infinite;
   }
 }
 
+@keyframes brandRotation{
+  0% { transform: rotate(0deg)}
+  100% { transform: rotate(360deg)}
+}
+
+
 #main {
   min-height: 100vh;
   width: 100%;
@@ -279,64 +285,7 @@ code {
 
 
 
-#demo {
-// Start
-display: none !important;
-
-
-
-
-.loader {
-  width: 32px;
-  height: 32px; 
-  position: relative;
-}
-.loader:before {
-  content: "";
-  position: absolute;
-}
-.loader:after {
-  animation: moveX 0.5s infinite linear alternate;
-}
-
-@keyframes moveX {
-  100% { 
-    transform: translateX(-50%) scale(1.5);
-  }
-
-
-}
-    
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// End
-
-
-}
-
-
-
-
-
-
-
-
 // overwrite 
-
 div[data-id="prog-crak-erh"]{
   justify-content: flex-start !important;
 }
