From 53a6a94f50339f58da0e2bd41991f22178ce2802 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:24:27 +0300
Subject: [PATCH] #31 : Add Progress component

---
 src/components/Progress/Progress.svelte | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/Progress/Progress.svelte

diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
new file mode 100644
index 0000000..bdc1caf
--- /dev/null
+++ b/src/components/Progress/Progress.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { tweened } from 'svelte/motion';
+  import { cubicInOut } from 'svelte/easing';
+
+  const MAX_PERCENT = 100;
+
+  /**
+   * Progress value
+   */
+  export let value = 0.5
+
+  $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
+</script>
+
+<div class="sc-carousel-progress__container">
+  <div
+    class="sc-carousel-progress__indicator"
+    style="
+      width: {width}%;
+    "
+  ></div>
+</div>
+
+<style>
+  .sc-carousel-progress__container {
+    width: 100%;
+    height: 20px;
+    background-color: lightgray;
+  }
+  .sc-carousel-progress__indicator {
+    height: 100%;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file