Backend API
<div class="form"> <div class="label">Custom size</div> @(Html.DevExtreme().LoadIndicator() .ID("small-indicator") .Height(20) .Width(20) ) @(Html.DevExtreme().LoadIndicator() .ID("medium-indicator") .Height(40) .Width(40) ) @(Html.DevExtreme().LoadIndicator() .ID("large-indicator") .Height(60) .Width(60) ) <div class="label">Custom image</div> @(Html.DevExtreme().LoadIndicator() .IndicatorSrc(@Url.Content("~/Content/Images/LoadIndicator/Loading.gif")) ) <div class="label">Using with other widgets</div> @(Html.DevExtreme().Button() .ID("button") .Text("Send") .Height(40) .Width(180) .Template(@<text> @(Html.DevExtreme().LoadIndicator() .ID("button-indicator") .Visible(false) ) <span class="dx-button-text"><%- text %></span> </text>) .OnClick("button_onClick") ) </div> <script> function button_onClick(data) { data.component.option("text", "Sending"); $("#button-indicator").dxLoadIndicator("option", "visible", true); setTimeout(function() { $("#button-indicator").dxLoadIndicator("option", "visible", false); data.component.option("text", "Send"); }, 2000); } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class LoadIndicatorController : Controller { public ActionResult Overview() { return View(); } } }
.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; }
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.