CSSでプログレスバーを実装する

記事をご覧いただきありがとうございます。
このページを開いた時にプログレスバーが伸びていくアニメーションが入っていたと思います。

当記事ではこのプログレスバーをCSSのアニメーションで実装する方法について記しています。

Contents

実装イメージ
HTML
CSS
ソースコード全文

実装イメージ

今回実現したいものは下記のようなプログレスバーになります。
CSSで実装します。

HTML

HTMLはすごくシンプルですね。

<p>now loading...</p>
<div class="progBar">
    <p class="bar"></p>
</div>

CSS

12行目でバーの色、13行目で完了までの時間を指定できます。
16行目の@keyframesでバーを動かしています。

.progBar{
    width:400px;
    height:50px;
    background-color:#ececec;
    position:relative;
    border-radius:10px;
    overflow: hidden;
}
.progBar .bar{
    position:absolute;
    height:100%;
    background-color:#FFCA28;
    animation: progress 4s normal;
    animation-fill-mode: forwards;
}
@keyframes progress {
    0% {width: 0}
    100% {width: 100%}
}

下記のデモで動きをご確認いただけます。
『実行』ボタンクリックで動くようにしています。

now progress…

以上、CSSでプログレスバーを実装する方法でした。

jQueryで実装する方法もこちらに記載しております。
jQueryでプログレスバーを実装する

ソースコード全文

最後にコードを全文載せておきます。

<p>now loading...</p>
<div class="progBar">
	<p class="bar"></p>
</div>

<style>
	.progBar{
		width:400px;
		height:50px;
		background-color:#ececec;
		position:relative;
		border-radius:10px;
		overflow: hidden;
	}
	.progBar .bar{
		position:absolute;
		height:100%;
		background-color:#FFCA28;
		animation: progress 4s normal;
		animation-fill-mode: forwards;
	}
	@keyframes progress {
    	0% {width: 0}
    	100% {width: 100%}
	}
</style>

now progress…