코드랩 레퍼런스

Circle Loading 본문

카테고리 없음

Circle Loading

webstoryboy 2018. 1. 31. 20:32

See the Pen Circle Loading by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<style>
		body {
			height: 100vh;
			background:#ffcc80;
		}
		.loading {
			width: 20px; height: 120px;
			position: absolute; 
			left: 0; top: 0; right: 0; bottom: 0; margin: auto;
			animation: loading 1s ease-in-out 100;
		}
		.loading .circle1 {
			width: 20px; height: 20px; background:#004d40;
			border-radius: 50%; margin-bottom: 80px;
		}
		.loading .circle2 {
			width: 20px; height: 20px; background:#e65100;
			border-radius: 50%;
		}
		@keyframes loading {
			0% {transform: rotate(0deg)}
			100% {transform: rotate(360deg)}
		}
	</style>
</head>
<body>
	<div class="loading">
		<div class="circle1"></div>
		<div class="circle2"></div>
	</div>
</body>
</html>


Share

Ad

Comments