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

    Progress Bar

    Documentation

    The ProgressBar is a widget that shows current progress.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    <div class="form"> @(Html.DevExtreme().Button() .ID("progress-button") .Text("Start progress") .Width(200) .OnClick("button_onClick") ) <div class="progress-info"> Time left 00:00:<span id="timer">10</span> </div> <div id="progress"> @(Html.DevExtreme().ProgressBar() .ID("progressBarStatus") .Min(0) .Max(100) .Width("90%") .StatusFormat(new JS("progressBar_statusFormat")) .OnComplete("progressBar_onComplete") ) </div> </div> <script> var seconds = 10, inProgress = false; window.intervalId = window.intervalId || null; function timer() { seconds--; setCurrentStatus(); if(seconds === 0) { clearInterval(intervalId); seconds = 10; return; } } function setCurrentStatus() { $("#progressBarStatus").dxProgressBar("option", "value", (10 - seconds) * 10); $("#timer").text(("0" + seconds).slice(-2)); } function progressBar_statusFormat(value) { return "Loading: " + value * 100 + "%"; }; function progressBar_onComplete(e) { inProgress = false; $("#progress-button").dxButton("option", "text", "Restart progress"); e.element.addClass("complete"); }; function button_onClick(e) { clearInterval(intervalId); $("#progressBarStatus").removeClass("complete"); if(inProgress) { e.component.option("text", "Continue progress"); clearInterval(intervalId); } else { e.component.option("text", "Stop progress"); setCurrentStatus(); intervalId = setInterval(timer, 1000); } inProgress = !inProgress; } </script>
    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ProgressBarController : Controller { public ActionResult Overview() { return View(); } } }
    .form { padding: 20% 0; text-align: center; } #progress-button{ margin-bottom: 20px; } #progressBarStatus { display: inline-block; } .complete .dx-progressbar-range { background-color: green; }