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>
Source:stackexchange.com