ASP.NET Core ProgressBar Overview
The ProgressBar is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ProgressBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ProgressBar widget.
The ProgressBar delivers rich functionality for displaying and tracking the progress of a task. It supports multiple types, horizontal and vertical orientation, reversed direction, minimum and maximum values, and animation duration.
Initializing the ProgressBar
The following example demonstrates how to define the ProgressBar.
@(Html.Kendo().ProgressBar()
.Name("progressbar")
.Type(ProgressBarType.Percent)
.Animation(a => a.Duration(600))
)
<script type="text-javascript">
$(document).ready(function () {
$("#progressbar").data("kendoProgressBar").value(50);
});
</script>
<kendo-progressbar name="fastAndFurious" type="ProgressBarType.Percent" animation-duration="600" />
<script type="text-javascript">
$(document).ready(function () {
$("#progressbar").data("kendoProgressBar").value(50);
});
</script>
Basic Configuration
The following example demonstrates the basic configuration of the ProgressBar.
@(Html.Kendo().ProgressBar()
.Name("progressBar")
.Type(ProgressBarType.Chunk)
.ChunkCount(4)
.Min(0)
.Max(4)
.Value(2)
.ShowStatus(true)
.Orientation(ProgressBarOrientation.Vertical)
.Events(e =>
{
e.Change("onChange");
e.Complete("onComplete");
})
.Animation(a =>
{
a.Duration(500);
})
)
<kendo-progressbar name="progressBar"
show-status="true"
orientation="ProgressBarOrientation.Vertical"
type="ProgressBarType.Chunk"
animation-duration="600"
on-change="onChange"
on-complete="onComplete"/>
Next Steps
- Getting Started with the ProgressBar
Basic Usage of the ProgressBar HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the ProgressBar TagHelper for ASP.NET Core (Demo)