코드랩 레퍼런스
Circle Loading 본문
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