ローディングをhtmlとcssで作成する

今回は、htmlとcssを使ってローディングを作成します。

ローディングはぐるぐる回るやつですね。

読み込んでいるときにローディングを見せることが多いですね。

ローディングを作る

html

<div class="load">
<div></div>
<div></div>
</div>

htmlはいたってシンプルです。

css

.load{
	position:relative;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#eee;
}
.load:after{
	position:absolute;
	top:4px;
	left:4px;
	width:32px;
	height:32px;
	border-radius:50%;
	background:#fff;
	z-index:1;
	content:"";
}
.load div{
	width:40px;
	height:20px;
	border-radius:20px 20px 0 0;
}
.load div:first-child{
	background:#000;
	transform-origin:20px 20px;
	transform:rotate(0deg);
	animation:load1 0.5s linear 0s infinite normal;
}

@keyframes load1{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

@-webkit-keyframes load1{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

ローディングのサンプルを見る