Vuetify - change card loading style?

Question

I like the option

<v-card :loading="loading">...

but I would like to change the style from linear progress bar to (for example) overlay. I know I can change colors by binding color instead of boolean (true).

<v-card :loading="'red'">...

But can I change the behavior in such a way? Either making the bar thicker or better, to show overlay when loading=true?

Answer 1

apart from hacking the CSS and change from v-progress-linear to v-progress-overlay and hoping all works as expected, you will have not many more options

the documentation says, for the v-card slots:

• Name: progress
• Description: Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)

so you can work with a template but your options are limited to the "progress linear"

<v-card :loading="loading">
    <template slot="progress">
        <v-progress-linear color="red" indeterminate></v-progress-linear>
    </template>
    ...
</v-card>

as the example in CodePen

Answer 2

Use the progress slot on the v-card to show the overlay with your flavor of the loading indicator

Vuetify documentation v-card slots

<v-card class="ma-auto" width="300" height="300" :loading="loading">
    <template slot="progress">
        <v-overlay absolute class="d-flex flex-column text-center">
            <div>
                <v-progress-circular size="75" color="accent " :value="loadingProgress" indeterminate>
                    <span>Loading</span>
                </v-progress-circular>
            </div>
            <div>
                <v-btn text dark @click="loading = false" class="mt-3">Deactivate loading</v-btn>
            </div>
        </v-overlay>
    </template>
    <v-card-title></v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions class="justify-center">
        <v-btn @click="loading = true">Activate loading</v-btn>
    </v-card-actions>
</v-card>