ال Code الموجود في الدرس
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<div class="load">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>/*
Loading Animation
*/
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #333;
}
.load {
display: flex;
justify-content: center;
margin: 50px auto;
}
.load div {
width: 20px;
height: 20px;
background-color: orchid;
border-radius: 50%;
margin: 0 5px;
animation-name: up-and-down;
animation-duration: 0.9s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.load .two {
animation-delay: 0.3s;
}
.load .three {
animation-delay: 0.6s;
}
@keyframes up-and-down {
to {
opacity: 0.2;
transform: translateY(-20px);
}
}