Vue LoadPanel - Overview

The LoadPanel is an overlay UI component notifying the viewer that loading is in progress.

View Demo

The following code adds to your page a simple LoadPanel and a Button that invokes it. The hideOnOutsideClick property set to true instructs the LoadPanel to hide once a user clicks outside it.

  • <template>
  • <div>
  • <DxLoadPanel
  • :hide-on-outside-click="true"
  • v-model:visible="isLoadPanelVisible"
  • />
  • <DxButton
  • text="Show the Load Panel"
  • @click="handleClick"
  • />
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxLoadPanel } from 'devextreme-vue/load-panel';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • export default {
  • components: {
  • DxLoadPanel,
  • DxButton
  • },
  • data() {
  • return {
  • isLoadPanelVisible: false
  • }
  • },
  • methods: {
  • handleClick() {
  • this.isLoadPanelVisible = true;
  • }
  • }
  • }
  • </script>
See Also