pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak various progress bars

Browse Source 
Fixes #5
This commit is contained in:
Fornax
2022-05-13 17:43:10 +02:00
parent f1896972a1
commit 2561ef4ab2
6 changed files with 21 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
svelte/src/util/ProgressBar.svelte
View File

@@ -1,6 +1,8 @@
<script>
export let total = 0
export let used = 0
export let animation = "ease"
export let speed = 1000
let percent = 0
$: {
// Avoid division by 0
@@ -18,7 +20,7 @@ $: {
</script>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {percent}%;"></div>
<div class="progress_bar_inner" style="width: {percent}%; transition-timing-function: {animation}; transition-duration: {speed}ms;"></div>
</div>
<style>
@@ -26,13 +28,16 @@ $: {
display: block;
background: var(--background_color);
width: 100%;
height: 3px;
height: 6px;
border-radius: 6px;
overflow: hidden;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background: var(--highlight_background);
height: 100%;
width: 0;
transition: width 1s;
border-radius: 6px;
transition-property: width;
}
</style>