ローディングとかでよく見るプログレスバーをCSSだけでアニメーションさせる方法をご紹介します！

jQueryプラグインで実装する場合はこちら

直線

横にまっすぐ伸びるプログレスバーです

デモページ

HTML

<p>loading...</p>
<div class="prog-bar">
	<p class="bar"></p>
</div>

CSS

.prog-bar{
	width:100%;
	height:5px;
	background:#eee;	/*バーの背景色*/
	border-radius:5px;
	position:relative;
	overflow: hidden;
}
.prog-bar .bar{
	height:100%;
	background:#00aec9;	/*バーカラー*/
	position:absolute;
	animation: progress 2s normal;	/*アニメーションスピード*/
	animation-fill-mode: forwards;
}
@keyframes progress {
	0% {width: 0}
	100% {width: 100%}
}

円形

円でぐるっとまわるプログレスバーです

デモページ

HTML

<div class="prog-circle">
	<p class="inner">loading...</p>
</div>

CSS

.prog-circle {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	background: #00aec9;
	position: relative;
	z-index: 1;
}
.prog-circle::before,
.prog-circle::after {
	content: "";
	width: 220px;
	height: 220px;
	display: block;
	background: #eee;
	position: absolute;
	top: 0;
}
.prog-circle::before {	/*左半分*/
	left: -110px;
	transform-origin: right 110px;	/*座標*/
	z-index: 2;
	animation: rotate-circle-left 1s linear forwards;	/*アニメーションスピード*/
}
.prog-circle::after {	/*右半分*/
	left: 110px;
	transform-origin: left 110px;	/*座標*/
	z-index: 3;
	animation: rotate-circle-right 1s linear forwards;	/*アニメーションスピード*/
}
.prog-circle .inner {	/*中央の白い円*/
	width: 200px;
	height: 200px;
	padding-top: 90px;	/*中央テキスト位置*/
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 4;
}
@keyframes rotate-circle-right {	/*左半分アニメーション*/
	0% {
		transform: rotate(0deg);
		background: #eee;
	}
	50% {
		transform: rotate(180deg);
		background: #eee;
	}
	50.01% {
		transform: rotate(360deg);
		background: #00aec9;
	}
	100% {
		transform: rotate(360deg);
		background: #00aec9;
	}
}
@keyframes rotate-circle-left {	/*右半分アニメーション*/
	0% { transform: rotate(0deg); }
	50% { transform: rotate(0deg); }
	100% { transform: rotate(180deg); }
}