Progress Bar

The ProgressBar component displays progress for a flow or process to users.

Usage

Use progress to bind data to your Progress Bar.

<template>
<div>
  <ci-progress-bar :progress="progress" />
  <div class="controls">
    <ci-button @click="reduceProgress">
      -10%
    </ci-button>
    <ci-button @click="increaseProgress">
      +10%
    </ci-button>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0.75
    }
  },
  methods: {
    reduceProgress() {
      this.progress = Math.max(0, this.progress -= 0.1)
    },
    increaseProgress() {
      this.progress = Math.min(1, this.progress += 0.1)
    }
  }
}
</script>

<style>
.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>

Slots

Use label slot to add text for current progress.

<template>
<div>
  <ci-progress-bar :progress="progress">
    <template #label>
      {{ progressLabel }}
    </template>
  </ci-progress-bar>
  <div class="controls">
    <ci-button @click="reduceProgress">
      -10%
    </ci-button>
    <ci-button @click="increaseProgress">
      +10%
    </ci-button>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0.75
    }
  },
  computed: {
    progressLabel() {
      return `${(this.progress * 100).toFixed()}%`
    }
  },
  methods: {
    reduceProgress() {
      this.progress = Math.max(0, this.progress -= 0.1)
    },
    increaseProgress() {
      this.progress = Math.min(1, this.progress += 0.1)
    }
  }
}
</script>

<style>
.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>