unageanu https://blog.hatena.ne.jp/unageanu/ うなの日記 https://unageanu.hatenablog.com/ JavaScript CSS+JavaScriptを使って、簡単なプログレスバーを作ってみました。戦略は以下のとおり。 バーとして使うアニメーションGIFを作成しておく。 サンプルでは→を用意して使いました。 プログレスバーとするdiv要素を用意し、CSSで 背景画像として↑の画像を設定。 背景画像のx座標を調整し、最初は非表示になるようにしておく。 また、widthを固定しておく。 進捗状況が変わった場合、JavaScriptで背景画像のx座標を更新し、バーを表示する。 ↓のサンプルではタイマーで200msごとに進めています。 →サンプルはこちらソースは次のとおりです。 <html> <head> <meta h… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Funageanu.hatenablog.com%2Fentry%2F20081220%2F1229765195" title=" CSS+JavaScriptで作る簡単なプログレスバーのサンプル - うなの日記" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/u/unageanu/20081220/20081220182224.gif Hatena Blog https://hatena.blog 2008-12-20 18:26:35 rich https://unageanu.hatenablog.com/entry/20081220/1229765195 1.0 100%