ワイズリマインダー

CSSだけでクルクルまわす

ローディングなどに使用するくるくる回るやつ
それをCSSだけで作ります

DEMO

html

<div id="parent">
 <div id="circle"></div>
</div>

css

#parent{
	width:40px;			/* 円のwidth：circleと合わせる */
	height:40px;			/* 円のheight：circleと合わせる */
}
#circle{
	box-sizing:border-box;		/* 誤差をなくす*/
	position:absolute;
	width:40px;			/* 円のwidth：parentと合わせる */
	height:40px;			/* 円のheight：parentと合わせる */
	border-radius:50%;
	border:7px solid #888888;	/* 円の太さと色 */
	border-right-color:transparent;

	animation:spin 1s linear infinite;		/* 一周する秒数 */
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	-o-animation:spin 1s linear infinite;
	-ms-animation:spin 1s linear infinite;
}
@keyframes spin{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}
@-webkit-keyframes spin{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}
@-moz-keyframes spin{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}
@-o-keyframes spin{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}
@-ms-keyframes spin{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。