Your search did not match any results.
Load Indicator

Load Indicator

The LoadIndicator component notifies users that a process is in progress. In this demo, you can see how to initialize and configure the component and integrate it into other components.

Specify Dimensions

LoadIndicator allows you to specify its dimensions. Set the height and width properties to the size you need. In this demo, the first three components have different sizes.

Apply a Custom Indicator

If you want to apply a custom indicator, assign the path to a new image to the indicatorSrc property. In this demo, the fourth LoadIndicator displays a custom animated GIF.

Integrate LoadIndicator into Other Components

You can use LoadIndicator within other UI components. In this demo, the indicator appears in the Button component when a user clicks the button. To show and hide LoadIndicator, use the visible property.

Backend API
Copy to CodeSandBox
Apply
Reset
<template> <div class="form"> <div class="label">Custom size</div> <div class="indicators"> <DxLoadIndicator id="small-indicator" :height="20" :width="20" /> <DxLoadIndicator id="medium-indicator" :height="40" :width="40" /> <DxLoadIndicator id="large-indicator" :height="60" :width="60" /> </div> <div class="label">Custom image</div> <DxLoadIndicator id="image-indicator" indicator-src="../../../../images/Loading.gif" /> <div class="label">Using with other widgets</div> <DxButton id="button" :width="180" :height="40" :on-click="handleClick" > <template #content> <span> <DxLoadIndicator :visible="loadIndicatorVisible" class="button-indicator" /> <span class="dx-button-text">{{ buttonText }}</span> </span> </template> </DxButton> </div> </template> <script> import { DxButton } from 'devextreme-vue/button'; import { DxLoadIndicator } from 'devextreme-vue/load-indicator'; export default { components: { DxButton, DxLoadIndicator, }, data() { return { loadIndicatorVisible: false, buttonText: 'Send', }; }, methods: { handleClick() { this.loadIndicatorVisible = true; this.buttonText = 'Sending'; setTimeout(() => { this.loadIndicatorVisible = false; this.buttonText = 'Send'; }, 2000); }, }, }; </script> <style> .form { padding: 10px 0 0 10px; } .label { margin-bottom: 10px; font-size: 16px; } .label:not(:first-child) { margin-top: 30px; } #small-indicator, #medium-indicator, #large-indicator { vertical-align: middle; margin-right: 10px; } #button, #button .dx-button-content { padding: 0; } #button .button-indicator { height: 32px; width: 32px; display: inline-block; vertical-align: middle; margin-right: 5px; } .indicators { display: flex; align-items: center; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.40/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.6/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.1.6', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.33/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);