Zeen Component Library

# ZeenProgressBar

Компонент прогресс-бара

# Примеры:

  • Дефолтная тема прогресс-бара(numberOfDone=25, numberOfTotal=50, progressBarPercentTime=10):
  • Темная тема прогресс-бара(numberOfDone=25, numberOfTotal=50):
  • Кастомная тема прогресс-бара(numberOfDone=14, numberOfTotal=50, progressBardBorderRadius=0, progressBarPercentBorderRadius=0, progressBarHeight='10', progressBarPercentTime='5', progressBarBackground: '#E2E1ED', progressBarPercentBackground: '#AAA2F5', progressBarPercentColor: '#A921A8', progressBarTotalColor: '#16123B'):

# props

Название Тип Обязательный По умолчанию Описание
progressBardBorderRadius string - 10 задает радиус скругления прогресс-бара
progressBarPercentBorderRadius string - 15 задает радиус скругления процента прогресс-бара
numberOfDone number - 0 количество выполненных заданий
numberOfTotal number - 100 общее количество заданий
progressBarHeight string - 4 высота прогресс-бара
progressBarPercentTime string - 2 время для анимации загрузки индикатора прогресс-бара
color object - {} объект с кастомными цветами (подробнее см.ниже)
theme string - light доступны темы light и dark

# Кастомные цвета в объекте color

Название Тип Обязательный По умолчанию
progressBarBackground background-color прогресс-бара - берет значение из темы ($progress-bar-background-color)
progressBarPercentBackground background-color процента прогресс-бара - берет значение из темы ($progress-bar-percent-background-color)
progressBarPercentColor color выполненных заданий и процента - берет значение из темы ($progress-bar-percent-color)
progressBarTotalColor color общего количества заданий - берет значение из темы ($progress-bar-total-color)

# Source Code - исходный код компонента

<template>
  <div class="zeen-progress-bar" :id="`zeen-progress-bar-${componentId}`">
    <div class="zeen-progress-bar__wrapper">
      <div class="zeen-progress-bar__width" :style="styleObjectProgressBarWidth"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZeenProgressBar',
  props: {
    theme: {
      type: String,
      default: 'light',
      validator: (theme) => ['light', 'dark'].includes(theme),
    },
    color: {
      type: Object,
      default: () => {
        return {}
      },
    },
    numberOfDone: {
      type: Number,
      default: 0,
    },
    numberOfTotal: {
      type: Number,
      default: 100,
    },
    progressBarPercentTime: {
      type: String,
      default: '2',
    },
    progressPercent: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    componentId() {
      return this._uid
    },
    isDarkTheme() {
      return this.theme === 'dark'
    },
    styleObjectProgressBarWidth() {
      return {
        'width': this.progressPercent + '%',
        '--time': this.progressBarPercentTime + 's',
      }
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --progress-bar-border-radius: var(--main-input-radius);
  --progress-bar-height: 4px;
  --progress-bar-percent-border-radius: 15px;
  --progress-bar-text-offset: 12px;
  --progress-bar-persent-font-size: var(--main-larger-size);

  /* Цвета */
  --progress-bar-background: var(--main-light-color);
  --progress-bar-percent-background: var(--main-color);
  --progress-bar-color: var(--text-color);
  --progress-bar-total-color: var(--progress-bar-color);
}
</style>

<style lang="scss" scoped>
// todo удалить лишнее
.zeen-progress-bar {
  &__text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--progress-bar-text-offset);
  }

  &__percent,
  &__how {
    font-weight: 600;
    font-size: var(--progress-bar-persent-font-size);
    line-height: 1.3;
  }
  &__percent,
  &__done {
    color: var(--progress-bar-color);
  }
  &__total {
    color: var(--progress-bar-total-color);
  }

  &__wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--progress-bar-border-radius);
    background: var(--progress-bar-background);
    height: var(--progress-bar-height);
  }

  &__width {
    height: 100%;
    transform-origin: left top;
    transform: scaleX(0);
    animation: scale var(--time) forwards;

    border-radius: var(--progress-bar-percent-border-radius);
    background: var(--progress-bar-percent-background);
  }
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
</style>

← ZeenScrollBar →