Hello everyone, I will give you all free code, about learning "CSS Loading Animations Effects". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
This is the code HTML and CSS you need learn :
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>loading</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="run">
<p>Now Loading ..</p>
<div class="loading"></div>
<p> Please Wait </p>
</div>
</body>
</html>
2. CSS
*{
padding: 0; margin: 0;
font-family: 'poppins';
}
.run {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background: linear-gradient(315deg,
#ffffff, #d7e1ec);
}
p {
color: #555;
margin-bottom: 15px;
}
.loading {
width: 80px;
height: 80px;
border: 5px dashed #39adab;
margin-bottom: 20px;
border-radius: 50%;
animation: rotate 2s infinite;
}
@keyframes rotate{
to {
transform: rotate(360deg);
}
}
For more details, you can see the Video tutorial and Click link Channel below :
For more details, you can see the link YouTube below :
https://youtu.be/OtviFwoftgg
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Download Free Code ZIP : DOWNLOAD NOW
Belum ada tanggapan untuk "CSS Loading Animations Effects"
Post a Comment