Vuetify progress-linear doesn't show progress correctly

Programming
1

I am working on a dashboard project where I want to present a visualisation of active and idle devices using the v-progress-linear Vuetify component.

However, the progress bar is not displaying correctly even though I am not changing the value of the bar.

Code

<template>
<v-container fluid class="grey lighten-5">
    <v-card outlined flat class="mx-auto" align="center">
        <v-icon large class="mt-5 mb-1">mdi-developer-board</v-icon>
        <v-card-title class="justify-center pt-1 display-2 font-weight-black" > {{totalDevices}} </v-card-title>
        <v-card-subtitle class="justify-center">Total no of Devices</v-card-subtitle>
        <v-divider></v-divider>
        <v-row >
            <v-col>
                <v-card flat>
                <span class="caption" >Active: </span>
                <span class="subtitle-2" >{{totalActive}}</span>
                <v-progress-linear style="margin : 0 auto ;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')" ></v-progress-linear>
                </v-card >
            </v-col>
            <v-divider vertical></v-divider>
            <v-col class="d-flex justify-center">
                <v-card flat>
                    <span class="caption">Idle: </span>
                    <span class="subtitle-2 align-right" >{{totalIdle}}</span>
                    <v-progress-linear style="margin : 0 auto ;" class="mt-3 text-xs-center" determinate color="#ffaa2c" :value="calcProgressValue('idle')" ></v-progress-linear>
                </v-card>
            </v-col>
        </v-row>
        </v-card>
</v-container>
</template>

I am unable to find a solution online, so I am looking for help.

Result

2

The issue might be with the width of the v-progress-linear component. Try adding a max-width style to it and see if it resolves the issue.

<v-progress-linear style="margin: 0 auto; max-width: 200px;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')"></v-progress-linear>

Adjust the max-width value according to your preference.