いずれもjavascriptで値を書き換えるとアニメーションしながら伸縮します。
パターンA(簡易版)
以下のようなケースで使います。
- ブラウザ負荷を軽くしたい(スマホ用)
- 正確な表示じゃなくてもOK
Sample
Loading…70%
HTML
<div id="gauge" style="-moz-background-size: 70% 100%;-webkit-background-size:70% 100%;-o-background-size: 70% 100%;background-size: 70% 100%;">Loading...70%</div>
CSS
#gauge {
width: 100px;
height: 12px;
padding: 1px 4px;
border: 1px #000 solid;
font-size: 10px;
line-height: 12px;
color: #fff;
text-shadow: 1px 1px 0 #000;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
-moz-transition: background-size 1s;
-webkit-transition: background-size 1s;
-o-transition: background-size 1s;
transition: background-size 1s;
}
javascriptでゲージの長さを変える時はHTMLのbackground-sizeの”70%”の部分を書き換えます。
横幅を0%にした時、iOSのSafariではゲージの色が1px見えてしまうため1pxのborderを付加しています。
(backgroundはborderの背面に回り込むので、1pxのゲージが見えなくなる)。
そのため見た目上は±2%の誤差が出ますが、0%が1%になるよりは誤解されにくいのでこうしています。
より正確な表示をするならBパターンを使った方がベター。
パターンB(詳細版)
以下のようなケースで使います。
- パターンAより正確な表示がしたい
- 装飾したい(ゲージ部分にbackground-imageをrepeatさせたり、背景にグラデーションをつけたり)
- CSS3非対応ブラウザを対象にする場合
Sample
Loading…70%
HTML
<div id="gauge-wrapper">
<div id="gauge" style="width: 70%;">Loading...70%</div>
</div>
CSS
#gauge-wrapper {
position: relative;
width: 100px;
height: 14px;
border: 1px solid #000;
background: #666;
background: -moz-linear-gradient(top, #666 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#000));
background: -webkit-linear-gradient(top, #666 0%,#000 100%);
background: -o-linear-gradient(top, #666 0%,#000 100%);
background: -ms-linear-gradient(top, #666 0%,#000 100%);
background: linear-gradient(to bottom, #666 0%,#000 100%);
}
#gauge {
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 1px 4px;
font-size: 10px;
line-height: 12px;
white-space: nowrap;
color: #fff;
text-shadow: 1px 1px 0 #000;
background: #6db3f2;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) no-repeat #666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)) no-repeat #666;
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%) no-repeat #666;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
javascriptでゲージの長さを変える時はHTMLのwidthの”70%”の部分を書き換えます。
position: relative; と position:absolute; は省略可能ですが、
widthの書き換え時にブラウザのリフローが発生して描画の負荷が大きくなるので付けます。