HTML&CSSでゲージ(プログレスバー)を作るサンプルコード2種

いずれも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の書き換え時にブラウザのリフローが発生して描画の負荷が大きくなるので付けます。

Leave a Reply

Your email address will not be published. Required fields are marked *