DevExtreme React - Overview

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

View Demo

The following code adds a simple LoadIndicator to your page. You can change the widget size, using the height and width options.

  • <template>
  • <DxLoadIndicator
  • :visible.sync="isLoadIndicatorVisible"
  • :height="40"
  • :width="40"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
  •  
  • export default {
  • components: {
  • DxLoadIndicator
  • },
  • data() {
  • return {
  • isLoadIndicatorVisible: true
  • };
  • }
  • }
  • </script>

If you need to use a custom image in the LoadIndicator, assign its URL to the indicatorSrc option.

  • <template>
  • <DxLoadIndicator
  • :visible.sync="isLoadIndicatorVisible"
  • :indicatorSrc="indicatorUrl"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
  •  
  • export default {
  • components: {
  • DxLoadIndicator
  • },
  • data() {
  • return {
  • isLoadIndicatorVisible: true,
  • indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
  • };
  • }
  • }
  • </script>
See Also