Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <svelte:options customElement="jga-ui-progress" />
<style lang="scss">
progress {
&:hover {
&::after {
content: attr(data-percentage);
float: right;
font-size: 0.7em;
font-weight: 900;
text-align: right;
}
}
}
</style>
<script>
import { onMount } from "svelte";
// eslint-disable-next-line import/no-mutable-exports
export let label = "";
// eslint-disable-next-line import/no-mutable-exports
export let value = 0;
// eslint-disable-next-line import/no-mutable-exports
export let max = 100;
// eslint-disable-next-line import/no-mutable-exports
export let progressValue = 0;
// eslint-disable-next-line import/no-mutable-exports
export let progressMax = 0;
// eslint-disable-next-line import/no-mutable-exports
export let progressPercentage = 0;
onMount(() => {
progressValue = Number.parseFloat(value);
progressMax = Number.parseFloat(max);
progressPercentage = `${((progressValue / progressMax) * 100).toLocaleString()} %`;
});
</script>
{#if label !== ""}
<label for="progress">{label}</label>
{/if}
<progress id="progress" max="{progressMax}" value="{progressValue}" data-percentage="{progressPercentage}">
{progressPercentage} %
</progress>
|