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>