How to blur the background while showing vuetify progress loader

EaBengaluru 0
Viewed 27

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!!

vuetify.js vuejs2
1 Answers

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>
IVO GELOV0
Related