Remove loading.scss

Danidfra · Danidfra · commit c8187918d39d · 2024-11-15T12:27:01.000-03:00
diff --git a/index.html b/index.html
@@ -13,10 +13,10 @@
   </head>
   <body class="theme-mode-light no-reduce-motion">
     <div id="soapbox" class="h-full">
-      <div class="loading-indicator-wrapper">
-        <div class="loading-indicator">
-          <div class="loading-indicator__container">
-            <div class="loading-indicator__figure"></div>
+      <div class="h-screen w-screen flex justify-center items-center">
+        <div class="loading-indicator text-gray-50 text-xs uppercase flex flex-col justify-center overflow-visible h-screen w-screen items-center">
+          <div class="size-10 relative">
+            <div class="animate-loader-figure absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-12 rounded-full bg-transparent border-6 border-solid border-gray-200"></div>
           </div>
         </div>
       </div>
diff --git a/src/styles/application.scss b/src/styles/application.scss
@@ -1,4 +1,3 @@
-@use 'loading';
 @use 'ui';
 @use 'emoji-picker';
 @use 'accessibility';
diff --git a/src/styles/loading.scss b/src/styles/loading.scss
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -215,3 +215,9 @@
   }
 
 }
+
+@layer components {
+  .loading-indicator span {
+    @apply animate-loader-label;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -69,6 +69,8 @@ const config: Config = {
         'greentext': true,
       }),
       animation: {
+        'loader-figure': 'loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)',
+        'loader-label': 'loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)',
         fade: 'fade 150ms linear',
         'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
         'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite',
@@ -78,6 +80,38 @@ const config: Config = {
         'leave': 'leave 150ms ease-in forwards',
       },
       keyframes: {
+        'loader-figure': {
+          '0%': {
+            backgroundColor: 'rgb(229, 231, 235)',
+            width: '0px',
+            height: '0px',
+          },
+          
+          '29%': {
+            backgroundColor: 'rgb(229, 231, 235)',
+          },
+        
+          '30%': {
+            width: '3rem',
+            height: '3rem',
+            backgroundColor: 'transparent',
+            opacity: '1',
+            borderWidth: '6px',
+          },
+        
+          '100%': {
+            width: '3rem',
+            height: '3rem',
+            borderWidth: '0',
+            opacity: '0',
+            backgroundColor: 'transparent',
+          },
+        },
+        'loader-label': {
+          '0%': { opacity: '0.25' },
+          '30%': { opacity: '1' },
+          '100%': { opacity: '0.25' },
+        },
         fade: {
           '0%': { opacity: '0' },
           '100%': { opacity: '1' },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-@use 'loading';`
`2`	`1`	`@use 'ui';`
`3`	`2`	`@use 'emoji-picker';`
`4`	`3`	`@use 'accessibility';`
Original file line number	Diff line number	Diff line change
`@@ -215,3 +215,9 @@`
`215`	`215`	`}`
`216`	`216`
`217`	`217`	`}`
	`218`	`+`
	`219`	`+@layer components {`
	`220`	`+ .loading-indicator span {`
	`221`	`+ @apply animate-loader-label;`
	`222`	`+ }`
	`223`	`+}`