Progress

Progress (진행 바)

현재 작업의 진행 상황을 표시하고 사용자에게 현재 상태를 알려주는 컴포넌트예요.

출처: 문서

본문

선형 진행 바 (Linear progress bar)

percentage 속성으로 백분율을 설정해요. 필수이며 0-100 사이여야 해요. format을 설정해서 텍스트 형식을 커스터마이징할 수 있어요.

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

내부 백분율 (Internal percentage)

이 경우 백분율은 추가 공간을 차지하지 않아요. stroke-width 속성이 진행 바의 너비를 결정하고, text-inside 속성을 사용해서 설명을 진행 바 안에 넣어요.

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

커스텀 색 (Custom color)

color 속성으로 진행 바 색을 설정할 수 있어요. 색 문자열, 함수 또는 배열을 받아요.

import { ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(20)
const customColor = ref('#409eff')

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const customColorMethod = (percentage: number) => {
  if (percentage  {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

원형 진행 바 (Circular progress bar)

type 속성을 circle로 지정해서 원형 진행 바를 사용하고, width 속성으로 원의 크기를 바꿀 수 있어요.

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

대시보드 진행 바 (Dashboard progress bar)

type 속성을 dashboard로 지정해서 대시보드 진행 바를 사용할 수도 있어요.

import { onMounted, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(10)
const percentage2 = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value  {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}

커스텀 내용 (Customized content)

default 슬롯을 사용해서 커스텀 내용을 추가해요.

import { Check } from '@element-plus/icons-vue'

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}

미확정 진행 (Indeterminate progress)

indeterminate 속성을 사용해서 불확정 진행을 설정하고, duration으로 애니메이션 지속 시간을 제어해요.

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

줄무늬 진행 (Striped progress)

striped 속성을 사용해서 줄무늬 진행을 설정해요. striped-flow로 줄무늬가 흐르게 할 수 있고, duration으로 애니메이션 지속 시간을 제어해요.

import { computed, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(70)
const duration = computed(() => Math.floor(percentage.value / 10))

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

API

Attributes

Slots

더 알아보기 (Learn more)

• Pagination 컴포넌트 — 페이지네이션
• Result 컴포넌트 — 결과
• Element Plus 시작하기 — 프로젝트 설정