refactor: progressbar to tailwind

* refactor: progressbar to tailwind

* refactor: move progressbar to tailwind

Author: lukonik

projects/ngverse/src/lib/ngverse.css

@@ -92,7 +92,4 @@
 html,
 body {
   @apply bg-background text-foreground;
-
-  background-color: var(--color-background);
-  color: var(--color-foreground);
 }

projects/ngverse/src/lib/progress-bar/progress-bar.component.css

@@ -1,42 +1,8 @@
-.progress-bar-container {
-  border-radius: 6px;
-  position: relative;
-  overflow-x: hidden;
-  height: 12px;
-  border: var(--border);
+.inc {
+  animation: indeterminateIncrease 2s infinite;
 }
-/* determinate */
-.determinate-bar {
-  color: white;
-  font-size: 8px;
-  transition: transform 0.3s ease-out;
-  transform-origin: left;
-  height: 100%;
-  background: var(--color-primary);
-  position: absolute;
-  text-align: center;
-  width: 100%;
-}
-
-/* indeterminate */
-
-.indeterminate-line {
-  position: absolute;
-  opacity: 0.4;
-  background: var(--color-surface);
-  width: 150%;
-  height: 100%;
-}
-.indeterminate-subline {
-  position: absolute;
-  background: var(--color-primary);
-  height: 100%;
-  &.inc {
-    animation: indeterminateIncrease 2s infinite;
-  }
-  &.dec {
-    animation: indeterminateDecrease 2s 0.5s infinite;
-  }
+.dec {
+  animation: indeterminateDecrease 2s 0.5s infinite;
 }
 
 @keyframes indeterminateIncrease {

projects/ngverse/src/lib/progress-bar/progress-bar.component.html

@@ -1,11 +1,12 @@
-<div class="progress-bar-container">
+<div class="relative h-3 overflow-x-hidden rounded-md border border-border">
   @if (indeterminate()) {
-    <div class="indeterminate-line"></div>
-    <div class="indeterminate-subline inc"></div>
-    <div class="indeterminate-subline dec"></div>
+    <div class="absolute h-full w-[150%] bg-surface opacity-40"></div>
+    <div class="inc absolute h-full bg-primary"></div>
+    <div class="dec absolute h-full bg-primary"></div>
   } @else {
     <div
-      class="determinate-bar"
+      aria-label="progress bar"
+      class="h-full origin-left bg-primary transition-transform duration-300 ease-in-out"
       role="progressbar"
       [style.transform]="transformValue()"
     ></div>

projects/ngverse/src/lib/progress-bar/progress-bar.component.spec.ts

@@ -29,7 +29,7 @@ describe('ProgressBarComponent', () => {
   it("should display indeterminate progress bar if 'indeterminate' is true", async () => {
     componentRef.setInput('indeterminate', true);
     await fixture.whenStable();
-    const element = fixture.nativeElement.querySelector('.indeterminate-line');
+    const element = fixture.nativeElement.querySelector('.inc');
     expect(element).toBeTruthy();
   });
 });