Css、html、javascriptのスター型プログレスバー

Question

私は自分のサイトで作業しているプログレスバーを持っています。以下のコード：

CSS：

#ProgressBar { 
position: relative; 
width: 100%; 
height: 10px; 
background-color: #ddd; 
border-radius: 25px; 
font-size:18px; 
} 
#Progress { 
position: absolute; 
height: 100%; 
background-color: #4CAF50; 
border-radius: 25px; 
} 

HTML：

<div Id="ProgressBar"> 
<div Id="Progress" style="width: <?php echo $Variable; ?>%;"></div>. 
</br> 
</div> 

スタイルの内部PHPは進歩のために満たされているどのくらいの割合の私のSQLデータベースとディスプレイの番号をプルダウンバー。

私はプログレスバーを作っていますが、バーの代わりに星をつけたいと思います。そんな評価システムのようなもの。私は私のような一定割合にそれを埋めることができる場所、これをどのように組み合わせるか見当もつかない

<div class="star"> 
<span>☆</span><span>☆</span><span>☆</span><span>☆</span>.<span>☆</span> 
</div> 

：

CSS：

.star span:before { 
content: "\2605"; 
position: absolute; 
width: 40%; 
background-color:#339966; 
} 

はHTML私はこのような単純な評価システムを取ってみました私は元の進行状況バーでやりました。どんな助けもありがとう。

Answer 1

反復する星の背景を#inner divに設定することができます。次に、このdivの上に白い背景の別のdivを配置して、星の背景の一部を隠します。

#overlayにPHPコードを入力します。

進捗状況を40％表示する場合は、正しい位置にあるため、#overlay divに60％の幅を与える必要があります。私は行くよどこに近いです

#outer { 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 16px; 
 
    border: 1px solid #d8d8d8; 
 
} 
 

 
#inner { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Star.png'); 
 
    background-repeat: repeat; 
 
    z-index: 5; 
 
} 
 

 
#overlay { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: #fff; 
 
    z-index: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="overlay" style="width:60%"></div> 
 
    <div id="inner"></div> 
 
</div>