diff options
| author | Jakob Stendahl <jakob.stendahl@outlook.com> | 2022-04-28 01:32:54 +0200 |
|---|---|---|
| committer | Jakob Stendahl <jakob.stendahl@outlook.com> | 2022-04-28 01:33:08 +0200 |
| commit | 55cd53f4e6b1e13d2866a84a9631be8f89651cf2 (patch) | |
| tree | 5b77ffc3311b490d4f979055e97823011280aace /src/components/Basic/Bar.svelte | |
| parent | ae52909d00cdcda30d6ed07e302c0a50abe70b75 (diff) | |
| download | Aurora-data-55cd53f4e6b1e13d2866a84a9631be8f89651cf2.tar.gz Aurora-data-55cd53f4e6b1e13d2866a84a9631be8f89651cf2.zip | |
Add one hour forecast
Diffstat (limited to 'src/components/Basic/Bar.svelte')
| -rw-r--r-- | src/components/Basic/Bar.svelte | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/Basic/Bar.svelte b/src/components/Basic/Bar.svelte new file mode 100644 index 0000000..7b17c3e --- /dev/null +++ b/src/components/Basic/Bar.svelte @@ -0,0 +1,48 @@ +<script lang="ts"> + export let percentage = 0.7; + export let vertical = false; +</script> + +<style> + :root { + --progress: 100%; + } + + .wrapper { + position: relative; + background-color: #c6c6c6; + border-radius:15px; + width: 100%; + height: 100%; + } + + .bar-wrapper { + overflow: hidden; + position: relative; + border-radius: 15px; + height: 100%; + width: 100%; + top: calc(100% - var(--progress)); + } + + .bar { + position: absolute; + height: 100%; + width: 100%; + bottom: calc(100% - var(--progress)); + overflow: hidden; + background: linear-gradient(0deg, + rgba(217,217,217,1) 0%, + rgba(164,255,177,1) 70%, + rgba(255,136,240,1) 100%); + border-radius: 15px; + } +</style> + +<div> + <div class="wrapper" class:vertical style="--progress: {percentage*100}%"> + <div class="bar-wrapper"> + <div class="bar"></div> + </div> + </div> +</div> |