<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sync programming loading effect tutorial</h1>
<div id="load-container">
<div class="loadbox">
<div class="loadbox1">
<div class="loadbox2">
</div>
</div>
</div>
</div>
</body>
</html>
STYLE.CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: rgb(44, 2, 44);
}
h1{
color: rgb(245, 233, 62);
text-transform: uppercase;
text-align: center;
font-size: 50px;
margin-top: 40px;
}
#load-container{
width: 200px;
height: 200px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-80%);
/* background-color: greenyellow; */
}
.loadbox{
width: calc(100% - 16px);
height: calc(100% - 16px);
border: 8px solid #1e3750;
border-radius: 50%;
border-top: 18px solid rgb(238, 13, 88);
animation: rotate 1s linear infinite;
}
.loadbox1{
width: 100%;
height: 100%;
border: 8px solid #1e3750;
border-radius: 50%;
border-bottom: 18px solid rgb(21, 238, 13);
animation: rotate 5s linear infinite;
/* box-shadow: 0 8px 8px 0; */
}
.loadbox2{
width: 100%;
height: 100%;
border: 8px solid #1e3750;
border-radius: 50%;
border-left: 18px solid rgb(247, 109, 29);
animation: rotate 3s linear infinite;
/* box-shadow: 0 8px 8px 0; */
}
@keyframes rotate{
100%{
transform: rotate(360deg);
}
}
No comments:
Post a Comment