improved progress bar design

resources/css/app.scss

@@ -3,7 +3,6 @@
 @import "data-table.scss";
 @import "tinymce.scss";
 @import "prism.css";
-@import "progressbar.scss";
 
 * {
     box-sizing: border-box;

resources/css/progressbar.scss

@@ -1,28 +0,0 @@
-$vue3-progress-bar-container-z-index: 999999 !default;
-$vue3-progress-bar-container-transition: all 500ms ease !default;
-
-$vue3-progress-bar-color: $primary-color-dark !default;
-$vue3-progress-bar-height: 4px !default;
-$vue3-progress-bar-transition: all 200ms ease !default;
-
-.vue3-progress-bar-container {
-    position: fixed;
-    z-index: $vue3-progress-bar-container-z-index;
-    top: 0;
-    left: 0;
-    width: 100%;
-    opacity: 0;
-    background-color: #eee;
-    transition: $vue3-progress-bar-container-transition;
-    &[active="true"] {
-        opacity: 1;
-        transition: none;
-    }
-    .vue3-progress-bar {
-        width: 100%;
-        height: $vue3-progress-bar-height;
-        transform: translate3d(-100%, 0, 0);
-        background-color: $vue3-progress-bar-color;
-        transition: $vue3-progress-bar-transition;
-    }
-}

resources/js/components/SMProgress.vue

@@ -9,10 +9,10 @@
                     width: `${(progressStore.status || 0) * 100}%`,
                 }"></div>
         </div>
-        <div
+        <div class="sm-spinner">
-            class="sm-spinner"
+            <div
-            :style="{ opacity: `${progressStore.spinner || 0}` }">
+                class="sm-spinner-icon"
-            <div class="sm-spinner-icon"></div>
+                :style="{ opacity: `${progressStore.spinner || 0}` }"></div>
         </div>
     </div>
 </template>
@@ -48,7 +48,7 @@ const progressStore = useProgressStore();
     position: fixed;
     top: 10px;
     right: 10px;
-    transition: opacity 0.2s ease-in-out;
+    opacity: 0.5;
 
     .sm-spinner-icon {
         width: 18px;
@@ -60,6 +60,8 @@ const progressStore = useProgressStore();
         border-left-color: #29d;
         border-radius: 50%;
 
+        transition: opacity 0.2s ease-in-out;
+
         -webkit-animation: sm-progress-spinner 500ms linear infinite;
         animation: sm-progress-spinner 500ms linear infinite;
     }

resources/js/main.js

@@ -12,7 +12,6 @@ import SMColumn from "./components/SMColumn.vue";
 import { PromiseDialog } from "vue3-promise-dialog";
 import { VueReCaptcha } from "vue-recaptcha-v3";
 import "./lib/prism";
-import { Vue3ProgressPlugin } from "@marcoschulte/vue3-progress";
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
@@ -27,7 +26,6 @@ createApp(App)
             autoHideBadge: true,
         },
     })
-    .use(Vue3ProgressPlugin)
     .component("SMContainer", SMContainer)
     .component("SMRow", SMRow)
     .component("SMColumn", SMColumn)

resources/js/router/index.js

@@ -4,8 +4,6 @@ import { useApplicationStore } from "../store/ApplicationStore";
 import { useProgressStore } from "../store/ProgressStore";
 import { api } from "../helpers/api";
 
-const progresses = [];
-
 export const routes = [
     {
         path: "/",
@@ -379,7 +377,6 @@ router.beforeEach(async (to, from, next) => {
     const applicationStore = useApplicationStore();
     const progressStore = useProgressStore();
 
-    // progressStore.reset();
     progressStore.start();
 
     applicationStore.clearDynamicTitle();

resources/js/store/ProgressStore.ts

@@ -21,12 +21,12 @@ export const useProgressStore = defineStore({
 
     actions: {
         start() {
-            if (this.queue == 0) {
+            if (this.queue == 0 && this.opacity == 0) {
                 this.set(0);
 
                 const work = () => {
                     window.setTimeout(() => {
-                        if (this.status != null) {
+                        if (this.status < 1) {
                             this._trickle();
                             work();
                         }
@@ -43,7 +43,7 @@ export const useProgressStore = defineStore({
                     this.timeoutID = window.setTimeout(() => {
                         this._show();
                         this.timeoutID = null;
-                    }, 200);
+                    }, 2000);
                 }
 
                 if (this.spinner == 0) {
@@ -55,7 +55,8 @@ export const useProgressStore = defineStore({
         },
 
         set(number: number) {
-            this.status = clamp(number, 0.08, 1);
+            const n = clamp(number, 0.08, 1);
+            this.status = n;
         },
 
         finish() {
@@ -67,21 +68,29 @@ export const useProgressStore = defineStore({
         _trickle() {
             const n = this.status;
 
-            if (this.queue == 0 && this.timeoutID == null) {
+            if (this.queue == 0) {
-                this.timeoutID = window.setTimeout(() => {
+                if (this.opacity == 0 && this.timeoutID != null) {
-                    this.set(1);
+                    this._hide();
+                    window.clearTimeout(this.timeoutID);
                     this.timeoutID = null;
-
+                } else if (this.timeoutID == null) {
                     this.timeoutID = window.setTimeout(() => {
-                        this._hide();
+                        this.set(1);
                         this.timeoutID = null;
+
+                        this.timeoutID = window.setTimeout(() => {
+                            this._hide();
+                            this.timeoutID = null;
+
+                            window.setTimeout(() => {
+                                this.status = 0;
+                            }, 150);
+                        }, 500);
                     }, 500);
-                }, 200);
+                }
             }
 
-            if (n == 0) {
+            if (n > 0 && n < 1) {
-                this.start();
-            } else if (n < 1) {
                 let amount = 0;
 
                 if (n >= 0 && n < 0.2) {