Vuetify: [Feature Request] Full Screen Loading state

[trajano]

New Functionality

I am looking for a simple API where I can do

Loading.show()

Which will do at least the following...

• darken the screen
• display a spinner

and has a complementary

Loading.hide()

Which will restore things.

This is available in Quasar. If it is present, can you make sure it is added to the documentation with a link from https://vuetifyjs.com/components/progress

Improvements

I find this to be a common case when dealing with long running processes especially on login.

Bugs or Edge Cases it Helps Avoid

To further enhance this, I would actually like an option where we can set the progress and lock the screen in alternative ways, one way I wanted was have a progress bar that would appear below the toolbar while the rest of the app is locked. However that can be in the future.

[robokozo]

Element.io has a similar feature http://element.eleme.io/#/en-US/component/loading#full-screen-loading

I think it'd be cool if this was available in vuetify too

[tobidalhof]

Any news on this?

[johnleider]

It will be in the front end component pack. Coming this year.

[samuelcolburn]

Just thought I would add that you can hack this on pretty easily with the dialog component using the fullscreen and content-class props:

<div id="app">
  <v-app id="inspire">
    <v-layout row justify-center>
      <v-dialog v-model="loading" persistent fullscreen content-class="loading-dialog">
        <v-container fill-height>
          <v-layout row justify-center align-center>
            <v-progress-circular indeterminate :size="70" :width="7" color="purple"></v-progress-circular>
          </v-layout>
        </v-container>
      </v-dialog>
    </v-layout>
  </v-app>
</div>

.loading-dialog {
   background-color: #303030; 
}

https://codepen.io/smcolburn/pen/VXREGy

[Flamenco]

Inspired by the @samuelcolburn _hack_, here a component that fixes a couple of issues and adds a some few features.

<template>
  <v-layout row justify-center>
    <v-dialog v-model="value" persistent content content-class="centered-dialog">
      <v-container fill-height>
        <v-layout column justify-center align-center>
          <v-progress-circular indeterminate :size="70" :width="7" :color="progressColor"></v-progress-circular>
          <h1 v-if="message != null">{{message}}</h1>
        </v-layout>
      </v-container>
    </v-dialog>
  </v-layout>
</template>

<script>
    export default {
        name: "Loading",
        data: function () {
            return {}
        },
        props: {
            value: {type: Boolean, default: false},
            message: {type: String, default: null},
            progressColor: {type: String, default: 'purple'},
        },
    }
</script>

<style>
  .dialog.centered-dialog,
  .v-dialog.centered-dialog
 {
    background: #282c2dad;
    box-shadow: none;
    border-radius: 6px;
    width: auto;
    color: whitesmoke;
  }
</style>

[priyolahiri]

To add to this, here's a loading component with epic-spinners integrated

You can change to your choice of spinner by changing fingerprint-spinner to one of your choice. Go to
http://epic-spinners.epicmax.co/#/ to find one that you like

Also, don't forget to install epic-spinner into your project

<template>
<v-layout row justify-center>
  <v-dialog v-model="value" persistent content content-class="centered-dialog">
    <v-container fill-height>
      <v-layout column justify-center align-center>
        <fingerprint-spinner :animation-duration="1500" :size="64" :color="progressColor" />
        <h1 v-if="message != null">{{message}}</h1>
      </v-layout>
    </v-container>
  </v-dialog>
</v-layout>
</template>
<script>
import {
  FingerprintSpinner
} from 'epic-spinners'
export default {
  name: "Loading",
  components: {
    FingerprintSpinner
  },
  data: function() {
    return {}
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: "Please wait..."
    },
    progressColor: {
      type: String,
      default: '#FFFFFF'
    },
  },
}
</script>

<style>
.dialog.centered-dialog {
  background: #282c2dad;
  box-shadow: none;
  border-radius: 6px;
  width: auto;
  color: whitesmoke;
}
</style>

[vahdet]

+1 for the last paragraph of the original post:

To further enhance this, I would actually like an option where we can set the progress and lock the screen in alternative ways, one way I wanted was have a progress bar that would appear below the toolbar while the rest of the app is locked. However that can be in the future.

[mkpaz]

Just a notice. In 1.1.0 .dialog class has been changed to .v-dialog so this rule .dialog.centered-dialog is no longer valid. Tnx for sharing.

[Flamenco]

@mkpaz Thanks. I updated the snippit.

[johnleider]

@Flamenco if you PR this to the doc examples I'll happily approve.

[Flamenco]

@johnleider It's evolved on my end quite a bit... I added a status bar similar to the snackbar stack as well. (https://codepen.io/Flamenco/full/ZoRvLw/). It's a bit more lengthy now. What doc topic did you have in mind?

[johnleider]

Stop by the community and msg me https://community.vuetifyjs.com

[pranay22]

Dumb question, how to use it in another component? Can you please share one example please? I'm trying to render it in created() and finish it in mounted()

[aguegu]

In the official doc, there is a new demo about loading dialog.

https://vuetifyjs.com/en/components/dialogs#loader

just enabling its persistent feature could be just enough to achieve this feature.

[blalan05]

I believe this is easily enough done in the userland; as has been proved in this thread.