JavaScript/jQuery Load Indicator

The JavaScript 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { let buttonIndicator; $('#small-indicator').dxLoadIndicator({ height: 20, width: 20, }); $('#medium-indicator').dxLoadIndicator({ height: 40, width: 40, }); $('#large-indicator').dxLoadIndicator({ height: 60, width: 60, }); $('#image-indicator').dxLoadIndicator({ indicatorSrc: '../../../../images/Loading.gif', }); $('#button').dxButton({ 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" lang="en"> <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=5.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/24.1.6/css/dx.light.css" /> <script src="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"> <div class="form"> <div class="label">Custom size</div> <div class="indicators"> <div id="small-indicator"></div> <div id="medium-indicator"></div> <div id="large-indicator"></div> </div> <div class="label">Custom image</div> <div id="image-indicator"></div> <div class="label">Using with other widgets</div> <div id="button"></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; } .indicators { display: flex; align-items: center; }

Specify Dimensions

JavaScript 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 JavaScript LoadIndicator displays a custom animated GIF.

Integrate JavaScript LoadIndicator into Other Components

You can use JavaScript 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 JavaScript LoadIndicator, use the visible property.