initial

layers/ui/components/progress-bar/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="[cn.b(), cn.m(type)]">
+    <div
+      :class="cn.e('bar')"
+      :style="{ width: `${progress}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'UiProgressBar',
+})
+
+const props = withDefaults(defineProps<ProgressBarProps>(), {
+  progress: 0,
+})
+
+export interface ProgressBarProps {
+  progress: number
+}
+
+const cn = useClassname('ui-progress-bar')
+const type = computed(() => {
+  if (props.progress <= 75)
+    return 'normal'
+  else if (props.progress > 75 && props.progress < 95)
+    return 'middle'
+  else
+    return 'high'
+})
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>

layers/ui/components/progress-bar/styles.scss

@@ -0,0 +1,33 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.ui-progress-bar {
+  background-color: var(--progress-bar-background-color);
+  border-radius: 2px;
+  height: 4px;
+  overflow: hidden;
+
+  &__bar {
+    height: 100%;
+    background-color: var(--progress-bar-color);
+    transition: ease-out;
+    transition-property: width, background-color;
+    transition-duration: .1s, .2s;
+  }
+
+  @include element-variant('progress-bar', 'normal', (
+          'background-color': $clr-grey-300,
+          'color': $clr-cyan-500,
+  ));
+
+  @include element-variant('progress-bar', 'middle', (
+          'background-color': $clr-warn-200,
+          'color': $clr-warn-500,
+  ));
+
+  @include element-variant('progress-bar', 'high', (
+          'background-color': $clr-red-100,
+          'color': $clr-red-500,
+  ));
+
+}