DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { let buttonIndicator; $scope.buttonOptions = { text: 'Send', height: 40, width: 180, template(data, container) { $(`<div class='button-indicator'></div><span class='dx-button-text'>${data.text}</span>`).appendTo(container); buttonIndicator = container.find('.button-indicator').dxLoadIndicator({ visible: false, }).dxLoadIndicator('instance'); }, onClick(data) { data.component.option('text', 'Sending'); buttonIndicator.option('visible', true); setTimeout(() => { buttonIndicator.option('visible', false); data.component.option('text', 'Send'); }, 2000); }, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="form"> <div class="label">Custom size</div> <div id="small-indicator" dx-load-indicator="{ height: 20, width: 20 }" ></div> <div id="medium-indicator" dx-load-indicator="{ height: 40, width: 40 }" ></div> <div id="large-indicator" dx-load-indicator="{ height: 60, width: 60 }" ></div> <div class="label">Custom image</div> <div id="image-indicator" dx-load-indicator="{ indicatorSrc: '../../../../images/Loading.gif' }" ></div> <div class="label">Using with other widgets</div> <div id="button" dx-button="buttonOptions"></div> </div> </div> </body> </html>
    .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; }