diff --git a/packages/vlossom/src/components/types.ts b/packages/vlossom/src/components/types.ts
index a52d9fa51..a9857d3ce 100644
--- a/packages/vlossom/src/components/types.ts
+++ b/packages/vlossom/src/components/types.ts
@@ -6,5 +6,6 @@ export type * from './vs-input';
export type * from './vs-input-wrapper';
export type * from './vs-message';
export type * from './vs-page';
+export type * from './vs-progress';
export type * from './vs-section';
export type * from './vs-wrapper';
diff --git a/packages/vlossom/src/components/vs-progress/VsProgress.scss b/packages/vlossom/src/components/vs-progress/VsProgress.scss
new file mode 100644
index 000000000..eea894234
--- /dev/null
+++ b/packages/vlossom/src/components/vs-progress/VsProgress.scss
@@ -0,0 +1,23 @@
+progress {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 0.7rem;
+}
+
+progress[value] {
+ &::-webkit-progress-bar {
+ overflow: hidden;
+ background-color: var(--vs-light-bg);
+ border-radius: 0.4rem;
+ }
+
+ &::-webkit-progress-value {
+ position: relative;
+ background-color: var(--vs-progress-backgroundColor, var(--vs-comp-backgroundColor));
+ }
+
+ &.primary::-webkit-progress-value {
+ background-color: var(--vs-progress-backgroundColor, var(--vs-comp-backgroundColor-primary));
+ }
+}
diff --git a/packages/vlossom/src/components/vs-progress/VsProgress.vue b/packages/vlossom/src/components/vs-progress/VsProgress.vue
new file mode 100644
index 000000000..2262950e7
--- /dev/null
+++ b/packages/vlossom/src/components/vs-progress/VsProgress.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/packages/vlossom/src/components/vs-progress/__tests__/vs-progress.test.ts b/packages/vlossom/src/components/vs-progress/__tests__/vs-progress.test.ts
new file mode 100644
index 000000000..bbecfc594
--- /dev/null
+++ b/packages/vlossom/src/components/vs-progress/__tests__/vs-progress.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsProgress from './../VsProgress.vue';
+
+describe('VsProgress', () => {
+ it('value 를 지정할 수 있다', () => {
+ // given
+ const wrapper = mount(VsProgress, {
+ props: {
+ value: 50,
+ },
+ });
+
+ // then
+ expect(wrapper.props('value')).toBe(50);
+ });
+
+ it('max 를 지정할 수 있다', () => {
+ // given
+ const wrapper = mount(VsProgress, {
+ props: {
+ max: 200,
+ },
+ });
+
+ // then
+ expect(wrapper.props('max')).toBe(200);
+ });
+});
diff --git a/packages/vlossom/src/components/vs-progress/index.ts b/packages/vlossom/src/components/vs-progress/index.ts
new file mode 100644
index 000000000..7fe9fab41
--- /dev/null
+++ b/packages/vlossom/src/components/vs-progress/index.ts
@@ -0,0 +1,11 @@
+import { VsComponent } from '@/declaration/types';
+import VsProgress from './VsProgress.vue';
+
+type VsProgressInstance = InstanceType;
+
+export type { VsProgressInstance };
+
+export default {
+ name: VsComponent.VsProgress,
+ component: VsProgress,
+};
diff --git a/packages/vlossom/src/components/vs-progress/stories/VsProgress.stories.ts b/packages/vlossom/src/components/vs-progress/stories/VsProgress.stories.ts
new file mode 100644
index 000000000..bac9bc1fe
--- /dev/null
+++ b/packages/vlossom/src/components/vs-progress/stories/VsProgress.stories.ts
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { colorScheme } from '@/storybook/args';
+import VsProgress from './../VsProgress.vue';
+
+const meta: Meta = {
+ title: 'Components/Base Components/VsProgress',
+ component: VsProgress,
+ render: (args: any) => ({
+ components: { VsProgress },
+ setup() {
+ return { args };
+ },
+ template: '',
+ }),
+ tags: ['autodocs'],
+ argTypes: {
+ colorScheme,
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const ColorScheme: Story = {
+ render: (args: any) => ({
+ components: { VsProgress },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
+export const Primary: Story = {
+ render: (args: any) => ({
+ components: { VsProgress },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
index 44e968847..e29a773ec 100644
--- a/packages/vlossom/src/declaration/types.ts
+++ b/packages/vlossom/src/declaration/types.ts
@@ -1,10 +1,4 @@
-import type {
- VsButtonStyleSet,
- VsDividerStyleSet,
- VsInputStyleSet,
- VsPageStyleSet,
- VsSectionStyleSet,
-} from '@/components/types';
+import type { VsButtonStyleSet, VsDividerStyleSet, VsInputStyleSet, VsPageStyleSet, VsSectionStyleSet } from '@/components/types';
import type { Ref } from 'vue';
export enum VsComponent {
@@ -16,6 +10,7 @@ export enum VsComponent {
VsInputWrapper = 'VsInputWrapper',
VsMessage = 'VsMessage',
VsPage = 'VsPage',
+ VsProgress = 'VsProgress',
VsSection = 'VsSection',
VsWrapper = 'VsWrapper',
}
diff --git a/packages/vlossom/src/styles/color-scheme.scss b/packages/vlossom/src/styles/color-scheme.scss
index 7db17cdbd..94acb26a8 100644
--- a/packages/vlossom/src/styles/color-scheme.scss
+++ b/packages/vlossom/src/styles/color-scheme.scss
@@ -9,6 +9,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$indigo-600},
comp-color-primary: #{$grey-50},
line-color: #{$grey-700},
+ light-bg: transparentize($grey-200, 0.5),
),
'red': (
area-backgroundColor: transparentize($red-50, 0.5),
@@ -18,6 +19,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$red-500},
comp-color-primary: #{$grey-50},
line-color: #{$red-500},
+ light-bg: transparentize($red-200, 0.8),
),
'amber': (
area-backgroundColor: transparentize($amber-50, 0.45),
@@ -27,6 +29,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$amber-600},
comp-color-primary: #{$grey-50},
line-color: #{$amber-500},
+ light-bg: transparentize($amber-200, 0.8),
),
'green': (
area-backgroundColor: transparentize($green-50, 0.45),
@@ -36,6 +39,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$green-600},
comp-color-primary: #{$grey-50},
line-color: #{$green-600},
+ light-bg: transparentize($green-200, 0.8),
),
'blue': (
area-backgroundColor: transparentize($blue-50, 0.45),
@@ -45,6 +49,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$blue-500},
comp-color-primary: #{$grey-50},
line-color: #{$blue-500},
+ light-bg: transparentize($blue-200, 0.8),
),
'indigo': (
area-backgroundColor: transparentize($indigo-100, 0.45),
@@ -54,6 +59,7 @@ $colorScheme-light: (
comp-backgroundColor-primary: #{$indigo-600},
comp-color-primary: #{$grey-50},
line-color: #{$indigo-600},
+ light-bg: transparentize($indigo-200, 0.8),
),
);
@@ -62,31 +68,37 @@ $colorScheme-dark: (
area-backgroundColor: #14151f,
comp-border-color: #{$indigo-400},
line-color: #{$grey-300},
+ light-bg: transparentize($grey-300, 0.8),
),
'red': (
area-backgroundColor: transparentize($red-400, 0.9),
comp-border-color: #{$red-300},
line-color: #{$red-300},
+ light-bg: transparentize($red-300, 0.8),
),
'amber': (
area-backgroundColor: transparentize($amber-400, 0.9),
comp-border-color: #{$amber-300},
line-color: #{$amber-300},
+ light-bg: transparentize($amber-200, 0.5),
),
'green': (
area-backgroundColor: transparentize($green-400, 0.9),
comp-border-color: #{$green-400},
line-color: #{$green-400},
+ light-bg: transparentize($green-300, 0.8),
),
'blue': (
area-backgroundColor: transparentize($blue-400, 0.9),
comp-border-color: #{$blue-400},
line-color: #{$blue-400},
+ light-bg: transparentize($blue-300, 0.8),
),
'indigo': (
area-backgroundColor: transparentize($indigo-400, 0.8),
comp-border-color: #{$indigo-400},
line-color: #{$indigo-400},
+ light-bg: transparentize($indigo-300, 0.8),
),
);