Vue LoadPanel - Customize the Loading Indicator

If you need to use a 3rd-party loading indicator inside the LoadPanel, assign its URL to the indicatorSrc property.

  • <template>
  • <div>
  • <DxLoadPanel
  • :hide-on-outside-click="true"
  • v-model:visible="isLoadPanelVisible"
  • :indicator-src="indicatorUrl"
  • />
  • <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 {
  • indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg",
  • isLoadPanelVisible: false
  • }
  • },
  • methods: {
  • handleClick() {
  • this.isLoadPanelVisible = true;
  • }
  • }
  • }
  • </script>

In case you do not need any loading indicator to be shown at all, assign false to the showIndicator property.

  • <template>
  • <div>
  • <DxLoadPanel
  • :hide-on-outside-click="true"
  • v-model:visible="isLoadPanelVisible"
  • :show-indicator="false"
  • />
  • <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