STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

improved progress bar design

Browse Source
This commit is contained in:
James Collins
2023-02-26 13:53:46 +10:00
parent b718212702
commit 55ec88e11f
6 changed files with 29 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/components/SMProgress.vue
View File

@@ -9,10 +9,10 @@
width: `${(progressStore.status || 0) * 100}%`,
}"></div>
</div>
<div
class="sm-spinner"
:style="{ opacity: `${progressStore.spinner || 0}` }">
<div class="sm-spinner-icon"></div>
<div class="sm-spinner">
<div
class="sm-spinner-icon"
: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;
}