圆形进度条概述

循环进度条是面向ASP的Telerik UI。NET MVC一个专业级的UI库，包含 110+ 组件，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

Telerik UI循环ProgressBar HtmlHelper的ASP。NET MVCis a server-side wrapper for the Kendo UI Circular ProgressBar widget. wrapper for the Kendo UI DataSource widget.

ProgressBar允许您显示和跟踪任务的进度。

该组件为您提供了使用模板自定义其外观的灵活性，或者为特定的进度范围设置不同的颜色。

• 循环进度条的演示页面

初始化循环进度条

下面的示例演示如何定义Circular ProgressBar，获取对其客户端对象的引用，并设置其值。

@(Html.Kendo(). circularprogressbar (). name ("progressbar") . value (0)) 

颜色

通过为显示的进度的特定范围设置不同的颜色，您可以自定义Circular ProgressBar的外观。要配置颜色，使用颜色配置选项。

下面的例子演示了一个圆形进度条，它会根据当前值改变颜色:

@(Html.Kendo().CircularProgressBar() .Name("progressbar") .Value(0) .Colors(c => {c. add ().Color("#C0392B").To(25);c.Add () .Color (" # D35400 ") .从(25),(50);c.Add () .Color (" # D4AC0D ") .从(50),(75);c.Add () .Color (" # 58 d68d ") .从(75),(99);c.Add () .Color(# 229954) .从(99);}) .CenterTemplate("#= value == 100 ?\ " <跨类= ' k-icon k-i-check”> < / span > \”:价值  + '%' #”))

模板

你可以使用CenterTemplate选项，以在圆形进度条的中心显示自定义消息或Html元素。

下面的例子展示了如何渲染与圆形进度条的颜色相匹配的自定义文本:

@(Html.Kendo().CircularProgressBar() .Name("progressbar") .Value(0) .CenterTemplate(" < / span > \”:价值  + '%' #”))

引用现有实例

下面的示例演示如何获取对现有Telerik UI Circular ProgressBar实例的引用。一旦建立了参考，就使用循环ProgressBar客户端API控制它的行为。

@(Html.Kendo(). circularprogressbar (). name ("progressbar") . value (0))