2016-12-28 23 views
1

をカスタムラベルを追加するには、以下の図の多少のように:色を変更し、私は青色の光に灰色から剣道の無限のプログレスバーの色を変更したい、それに

enter image description here

0123:私は

enter image description here

のようなプログレスバーにカスタムラベルを追加したいもう一つは、以下のコードを見つけてください。

<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> 

私はCSSではあまりよくありません。私はいくつかのスタイルをチェックアウトしましたが、それはいくつかの明確な値を持つプログレスバー用です。不確定のために何も見つけることができなかったため。

+1

コードを投稿してください。それは解決策を得るためにあなたを助けます。 – ilmk

+1

こんにちはilmk、コードのための投稿を編集しました.. Plsは見て.. – user2091061

答えて

1

まずはプログレスバーを作成するために使用しているもの。あなたは現在のHTMLとCSSのコードをあなたの質問を更新してくださいすることができますより多くのヘルプのためにあなたがなるように、私たちを使用している

<!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>

あなたはw3.css progress bar on w3 schoolプログレスバーを使用している場合と同様に は、それは非常に簡単ですあなたの特定のバーのみ

のお手伝いをすることができ、あなたのバーを変更するには柔軟性があるならば、あなたは

このリンクを使用することができます

EDIT あなたが剣道を使用して断固ていない場合は、それはコードが、私は解決策に遭遇してきたこの

<!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>

+0

実際に私は自分のコードで見ることができるような連続的な移動プログレスバーが必要です。 HTMLタグを使用することもできますが、進行状況バーに「Loading ...」というテキストを表示して背景色を変更する必要があります。 – user2091061

+0

あなたは –

+0

0

ようになり、あなたの問題を解決するブートストラップを使用することができますHTMLプログレスバーの色を変更:

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

まだコンテンツを追加する方法を探しています。この解決策は、剣道プログレスバーではなく、HTMLプログレス要素用です。

関連する問題