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

Question

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.

Post your code. It will hep you to get solution. – ilmk Dec 28 '16 at 10:33 — ilmk, Dec 28 '16 at 10:33
Hi ilmk, have edited the post for code.. Pls have a look.. – user2091061 Dec 28 '16 at 10:36 — user2091061, Dec 28 '16 at 10:36

Prateek Gangwal · Answer 1 · 2016-12-28T11:32:29.377

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>

Actually I need a continuous moving progress bar like can be seen in my code. I can even use HTML tag but still will need to display the text "Loading..." in progress bar and change the background color. — user2091061, Dec 28 '16 at 10:48
i have made an edit in the answer @user2091061 . Please have a look . if it helps an up vote would be appreciable :-) — Prateek Gangwal, Dec 28 '16 at 11:34

score 0 · Answer 2 · answered Dec 28 '16 at 11:25

0

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.

answered Dec 28 '16 at 11:25

user2091061

879
3
10
32

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

2 Answers2