From 55cd53f4e6b1e13d2866a84a9631be8f89651cf2 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Thu, 28 Apr 2022 01:32:54 +0200
Subject: Add one hour forecast

---
 src/components/Basic/Bar.svelte | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/Basic/Bar.svelte

(limited to 'src/components/Basic')

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>
-- 
cgit v1.2.3