In this article you will able to learn CSS Loading... Animation Effects where we use both HTML & CSS. This a advance tutorial of this CSS loading... Effect so that learn it carefully.
This is advanced label of this CSS loading... Animation Effects. If you want to learn more about this topic in more advance CSS effects then SUBSCRIBE to my channel.Subscribe Now
"index.html" Code:-
"index.html" Code:-
<!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>CSS Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <div class="spinner-box">
<div class="circle-border">
<di class="circle-core"></di>
</div>
<p>Loding...</p>
</div>
</body>
</html>
"style.css" Code:-
"style.css" Code:-
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.spinner-box{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.circle-border{
width: 150px;
height: 150px;
padding: 3px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: linear-gradient(0deg, rgb(0 0 0 / 0%) 33%, rgb(0, 255, 55) 100%);
animation: spin 0.8s linear infinite;
}
.circle-core{
width: 100%;
height: 100%;
background: black;
border-radius: 50%;
}
p{
position: absolute;
}
@keyframes spin {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
0 Comments
Post a Comment