[Vuejs]-Vuejs how to split v-progress linear as 4 piece or are there any option for this design? Vuetify 2

0👍

Vuetify has no options for changing v-progress-linear to match that design, but you can create your own custom component to match the design with not that much CSS. Here’s a codesandbox showing how it can be done.

I’m not exactly sure how the progress amount relates to how much of the bar should be filled in/colored, but it should be easily modifiable to fit your needs. In my example I treat each segment of the progress bar as a separate 25% towards completion and style them according to the actual progress passed down as a prop.

<template>
  <div class="progress-container">
    <div v-for="i in 4" :key="i" class="segment" :style="{ background: segmentColor(i) }" />
  </div>
</template>
<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  methods: {
    segmentColor(i) {
      if (this.progress <= 25) {
        return "rgb(76, 195, 93)"; // green
      } else if (this.progress > 25 && this.progress <= 50) {
        if (i > 1) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else if (this.progress > 50 && this.progress <= 75) {
        if (i > 2) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else {
        if (i === 4) {
          return "rgb(245, 130, 67)"; // orange
        }
      }
      return "rgb(217, 217, 217)";
    },
  },
};
</script>

<style>
.progress-container {
  display: flex;
}
.segment {
  width: 2rem;
  height: 0.5rem;
  background: rgb(217, 217, 217);
}
.segment:not(:first-child) {
  margin-left: 2px;
}
.segment:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.segment:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>

Leave a comment