How to blur the background while showing vuetify progress loader - vuejs2

Question

I want to blur the whole background except the progress bar in vuetify I searched a lot for the solution but did not find any of it.
Question: make the whole background dull except for the progress bar
here is how my html layout is
<div class="resume-wrapper">
<v-container fluid>
...
</v-container>
<div class="prg-wrapper">
<span style="display: inline-block; margin-bottom: 17px;">Downloading...</span>
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
></v-progress-linear>
</div>
</div>
My css is something like this
.prg-wrapper{
position: fixed;
left: 50%;
top: 29%;
transform: translate(-50%, -50%);
}
I'm using vuetify-2.6.x here is documentation for progress-bar https://vuetifyjs.com/en/components/progress-linear/#file-loader
Please help me thanks in advance!!

Answer 1

You should probably use something like this
<v-overlay :value="spinnerVisible" z-index="998">
<v-progress-circular indeterminate size="64" />
</v-overlay>
Otherwise, you can blur the background with a backdrop filter:
<div class="overlay">
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
/>
</div>
<style>
.overlay
{
background-color: rgba(145, 150, 158, 0.6);
backdrop-filter: blur(2px);
}
</style>