create a spinner loading animation using html and css
hello guys in this tutorial i'm going to show you how to create spinner loading animation
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="spin">
</div>
<style>
.spin{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border:20px solid #eee;
border-left-color:#21209c;
animation: spin 1.5s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<div class="spin">
</div>
<style>
.spin{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border:20px solid #eee;
border-left-color:#21209c;
animation: spin 1.5s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</body>
</html>
Post a Comment
If you have any doubts, Please let me know
Thanks!