パーセンテージ バーがあり、その前にテキストを配置しようとしています。
私の例はそれを行いますが、全体ではなく、小さなバーを中心にしています。
私の質問:内側の小さいバーだけでなく、バー全体の中央に「テスト」という単語を配置するにはどうすればよいですか。
HTML
<div id="bar1">
<div style="width:55%; text-align:center;">test</div>
</div>
CSS
#bar1 {
background-color: black;
border-radius: 13px; /* (height of inner div) / 2 + padding */
padding: 3px;
}
#bar1 div
{
background-color: green;
height: 20px;
border-radius: 10px;
-webkit-background-size:50px 50px;
background-image:
-webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
-webkit-animation:upbar 3s linear infinite;
}
@-webkit-keyframes upbar
{
0%{background-position:0 0}
100%{background-position:0px -100px}
}
(バーの安っぽさをお詫びします。適切な上向きのアニメーションを見つけようとしているので、どんな提案も歓迎します)