feat: add progress bars (#306)

packages/ui/src/lib/components/progress-circular.svelte

@@ -0,0 +1,49 @@
+<script>
+	export let progress = 0
+	let radius = 24
+	let strokeWidth = 12
+	let circleLength = 2 * Math.PI * radius
+	let strokeDashoffset = circleLength * (1 - progress)
+	$: strokeDashoffset = circleLength * (1 - progress)
+</script>
+
+<div class="container">
+	<svg width="60" height="60" style="transform: rotate(-90deg);">
+		<circle
+			class="circle-bg"
+			cx="30"
+			cy="30"
+			r={radius}
+			stroke-width={strokeWidth}
+			fill="transparent"
+		/>
+		<circle
+			class="circle-progress"
+			cx="30"
+			cy="30"
+			r={radius}
+			stroke-width={strokeWidth}
+			fill="transparent"
+			style="stroke-dasharray: {circleLength}; stroke-dashoffset: {strokeDashoffset};"
+		/>
+	</svg>
+</div>
+
+<style>
+	.container {
+		width: 220px;
+		height: 220px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.circle-bg {
+		stroke: #ececec;
+	}
+
+	.circle-progress {
+		stroke: #181818;
+		/* stroke-linecap: round; */
+	}
+</style>

packages/ui/src/lib/components/progress-linear.svelte

@@ -0,0 +1,30 @@
+<script>
+	export let progress = 0
+</script>
+
+<div class="container" style="width: 100%">
+	<div class="bar-bg">
+		<div class="bar-progress" style="width: {progress * 100}%" />
+	</div>
+</div>
+
+<style>
+	.container {
+		display: flex;
+		height: 12px;
+	}
+
+	.bar-bg {
+		background-color: #ececec;
+		height: 100%;
+		flex-grow: 1;
+		border-radius: 6px;
+	}
+
+	.bar-progress {
+		background-color: #181818;
+		height: 100%;
+		border-radius: 6px;
+		transition: width 0.5s ease;
+	}
+</style>

packages/ui/src/lib/components/progress.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	let cls: string | undefined = undefined
-	export { cls as class }
-
-	export let variant: 'circle' | 'line' = 'line'
-	export let min = 0
-	export let max: number
-	export let current: number
-</script>
-
-<div class={`root ${cls}`}>
-	This will be progress bar in shape of {variant} with min value of {min}, max value {max} and current
-	value {current}
-</div>
-
-<style lang="scss">
-</style>

packages/ui/src/routes/profile/+page.svelte

@@ -18,7 +18,8 @@
 	import { transaction } from '$lib/stores/transaction'
 	import { ROUTES } from '$lib/routes'
 	import { personas } from '$lib/stores/persona'
-	import Progress from '$lib/components/progress.svelte'
+	import ProgressCircular from '$lib/components/progress-circular.svelte'
+	import ProgressLinear from '$lib/components/progress-linear.svelte'
 	import Graph from '$lib/components/graph.svelte'
 
 	let y: number
@@ -27,6 +28,9 @@
 
 	let filterQuery = ''
 	let sortAsc = true
+
+	let cycleProgress = ($tokens.repTotal - $tokens.repStaked) / $tokens.repTotal
+	$: cycleProgress = ($tokens.repTotal - $tokens.repStaked) / $tokens.repTotal
 </script>
 
 <svelte:window bind:scrollY={y} />
@@ -80,7 +84,7 @@
 		<h2>Cycle data</h2>
 		<div>
 			<h3>Current cycle</h3>
-			<Progress variant="circle" max={$tokens.epochDuration} current={$tokens.timeToEpoch} />
+			<ProgressCircular progress={$tokens.timeToEpoch / $tokens.epochDuration} />
 			<div>{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
 			<LearnMore />
 			<div class="side-by-side">
@@ -100,11 +104,7 @@
 		</div>
 		<div>
 			<h2>Staked reputation</h2>
-			<Progress
+			<ProgressLinear progress={cycleProgress} />
-				variant="line"
-				max={$tokens.repTotal}
-				current={$tokens.repTotal - $tokens.repStaked}
-			/>
 			<p>
 				{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
 			</p>