New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Circular ProgressBar TagHelper

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

window.demoComponentProperties = { sections: [{ label: 'Configuration', controls: [ { type: 'button', label: 'Start Progress', onClick: function () { startProgress(); } }, { type: 'button', label: 'Reset Progress', onClick: function () { $('#progressbar').data('kendoCircularProgressBar').value(0); } } ] }] }; function startProgress() { var interval = setInterval(function () { var progressBar = $('#progressbar').data('kendoCircularProgressBar'); var value = progressBar.value(); if (value >= 100) { clearInterval(interval); return; } progressBar.value(value + 1); }, 50); } # if (value == 100) { # #= kendo.ui.icon({ icon: 'check' }) # # }else{# #: value # % #}# (typeof KendoLicensing === 'object' && KendoLicensing.setScriptKey('141j041f611f063e0837023e133i0i490g310c3a18445h425d38573a5i3d5k3f5f395f405b0i5a1a530940091g051i361i375e3g5k3d5i424i3j4j4b593759361i0a520d2i0f1d0g1d111i375c365a3b5f325d405f445h445b400f2339275i0j582c412i5a153h0342224h40155a2g3a00552i09511k4c421a5a1c3e254k2k381h58024h275d1557205k39284k2h5g30472c4627522i094f2f511b142d3j214d0b5047094h22371k31113425542e093c0f47511b4i253727442i5b13562b4i25143h2k5732135d2e3j274826381e4g0860175c2i3g06522j095123322e4d2f52165g3c611145295d360a4a121f502j57330f3c0a5g264a08591j572g5720501b114b285f0h391745541b3b0f2i571f4h41163g1j480i42072a54042b4907541j3j193b035h2a572c4a0j501j154101395k293b03572f402248052d4d0k5e360j45033109305d163b5i2a4c2b3d015i2f40133g154c24511e4314492f40154f3j2g4c0d3c1c542g5a370b4b185b2f5k2a054b0b4j0e4012494g3b154311410h4500502748064j0j5h0b3i4h422j4j1g3e5g1a38005c3d1h5g0k3j1e5j3g123h0f5c1e5g0k1c3e2d481558312513521f370f542e3j4j1g4k153d1444300b51165a1133255g320654082g4f2b470i5f123k4f3h27502f3g5d045e1a224k1c311033570j5d320k442a610j352k480c4j2349303d2e5348521k48124f0b5138025d244d3h29063c2h40233c234i104h2d05564a4i223e16251459103j055j3e051j3d1h3a153f2j3i1i4b195d2e602g0f49114d0c5h1a542j0c55481g311k4k4719245i3b13480d3f1a521b3a01355e1141045j1a245i0e51014j2a3h04531g310g1e4d4101502j470b54054k0b2e47033f2d48114f024h1d414i0j4e114h1e3d042c4c10335b342437610d5e0629054b23402g0e2g3c02492h330739175646531h4h105630062d005f1c3i2f0f46255e075a1k5g2b0c5h1761073k52492449084a0b600f2j3f1j53155i23591i501f3c59102d512d'));window._wrappersMetadata = Object.freeze({"name":"@progress/kendo-ui","productCode":"UIASPCORE","productName":"Telerik UI for ASP.NET Core","version":"2025.1.410","licensingDocsUrl":"https://www.telerik.com/aspnet-core-ui/documentation/installation/activating-your-license/setting-up-your-license"});kendo.syncReady(function(){jQuery("#progressbar").kendoCircularProgressBar({"centerTemplate":jQuery('#progress-template').html(),"colors":[{"color":"#C0392B","to":25},{"color":"#D35400","from":25,"to":50},{"color":"#D4AC0D","from":50,"to":75},{"color":"#58D68D","from":75,"to":99},{"color":"#229954","from":99}],"value":0});}); #progressbar { margin: 3em; }

Support & Learning Resources

Additional Resources