Updated loader styling

packages/frontend-2/components/viewer/LoadingBar.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
     <div
-      v-show="viewerBusy"
-      :class="`absolute w-full max-w-screen h-12 bg-blue-500/20 overflow-hidden ${
+      v-show="loadProgress < 1 && viewerBusy"
+      :class="`absolute w-full max-w-screen h-1 bg-foundation-page overflow-hidden ${
         showNavbar && !isEmbedEnabled ? 'mt-14' : 'mt-0'
       } text-xs text-foreground-on-primary z-50 text-center`"
     >
-      <!-- Mike or andrew pls make me biutifullll -->
-      <span class="text-2xl text-red-500">{{ Math.floor(loadProgress * 100) }}%</span>
-      <div class="swoosher absolute top-0 bg-blue-500 rounded-md"></div>
+      <div
+        class="absolute top-0 bg-blue-500 h-full transition-[width] duration-300 ease-out"
+        :style="{ width: `${Math.floor(loadProgress * 100)}%` }"
+      />
     </div>
   </div>
 </template>
@@ -21,25 +22,3 @@ const { isEnabled: isEmbedEnabled } = useEmbed()
 const { viewerBusy, loadProgress } = useInjectedViewerInterfaceState()
 const { showNavbar } = useViewerTour()
 </script>
-<style scoped>
-.swoosher {
-  width: 100%;
-  height: 100%;
-  animation: swoosh 1s infinite linear;
-  transform-origin: 0% 30%;
-}
-
-@keyframes swoosh {
-  0% {
-    transform: translateX(0) scaleX(0);
-  }
-
-  40% {
-    transform: translateX(0) scaleX(0.4);
-  }
-
-  100% {
-    transform: translateX(100%) scaleX(0.5);
-  }
-}
-</style>