Change color of indeterminate Kendo progress bar and add a custom label to it

2.2k Views Asked by user2091061 At 28 December 2016 at 10:31

I want to change the color of indeterminate progress bar of Kendo from gray to light blue somewhat like shown in image below :

One more thing I would Like to add a custom label to the progress bar like

Please find the code below:

<div style="top:50%; left:50%">        
            <div style="width: 180px; height: 20px; " id="progressbar"></div>
        </div>
    <script>
        var passProgress  = $("#progressbar").kendoProgressBar({
            value: false,
            width: 100,
            height: 20
        });
    </script>

I am not so good with CSS. I have checked out some styles but that are for progress bar with some definite values. For indeterminate could not find any.

Original Q&A

There are 2 best solutions below

Prateek Gangwal On 28 December 2016 at 10:45

first of all what you are using for making progress bar . Like if you are using w3.css progress bar on w3 school progress bar then it's pretty simple

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
  

  <div class="w3-progress-container">
    <div class="w3-progressbar w3-green" style="width:25%">
      <div class="w3-center w3-text-white">Loading...</div>
    </div>
  </div><br>


</body>
</html>

for more help can you please update your question with current html and css code you are using so that we can help you with your particular bar only

and if you are flexible in changing your bar then you can use this link

progress bar code

EDIT if you are not adamant using Kendo You can use bootstrap it will solve your problem the code goes like this

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      Loading...
    </div>
  </div>
</div>

</body>
</html>

user2091061 On 28 December 2016 at 11:25

I have come across a solution to change HTML progress bar color :

https://jqueryui.com/resources/demos/progressbar/indeterminate.html

Still looking how to add content to it. This solution is for HTML progress element not Kendo Progressbar.

Change color of indeterminate Kendo progress bar and add a custom label to it

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in KENDO-PROGRESSBAR

Trending Questions

Popular # Hahtags

Popular Questions