Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Load Indicator

    Load Indicator

    Documentation

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

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    <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("~/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 Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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; }