diff options
Diffstat (limited to 'src/components/Basic')
| -rw-r--r-- | src/components/Basic/Bar.svelte | 35 |
1 files changed, 21 insertions, 14 deletions
diff --git a/src/components/Basic/Bar.svelte b/src/components/Basic/Bar.svelte index 7b17c3e..88d541e 100644 --- a/src/components/Basic/Bar.svelte +++ b/src/components/Basic/Bar.svelte @@ -1,6 +1,6 @@ <script lang="ts"> - export let percentage = 0.7; - export let vertical = false; + export let percentage; + export let value; </script> <style> @@ -10,7 +10,7 @@ .wrapper { position: relative; - background-color: #c6c6c6; + /* background-color: #c6c6c6; */ border-radius:15px; width: 100%; height: 100%; @@ -22,27 +22,34 @@ border-radius: 15px; height: 100%; width: 100%; - top: calc(100% - var(--progress)); + left: calc(100% - var(--progress)); } .bar { position: absolute; height: 100%; width: 100%; - bottom: calc(100% - var(--progress)); + right: 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%); + background: linear-gradient(90deg, + rgba(255, 42,228,1) 0%, + rgba(164,255,177,1) 60%, + rgba(214,255,241,1) 85%, + rgba(255,255,255,1) 100%); border-radius: 15px; } + + .value { + position: absolute; + right: 0.1rem; + top: 0; + font-size: 1.5rem; + } </style> -<div> - <div class="wrapper" class:vertical style="--progress: {percentage*100}%"> - <div class="bar-wrapper"> - <div class="bar"></div> - </div> +<div class="wrapper" style="--progress: {percentage*100}%"> + <div class="bar-wrapper"> + <div class="bar"></div> </div> + <span class="value">{value}</span> </div> |