<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.loader{
border:20px solid #efefef;
width:100px ;
height:100px;
margin:0px auto;
border-top: 20px solid red;
border-radius:50%;
/* for safari */
-webkit-animation: spin 2s linear infinite ;
animation: spin 2s linear infinite;
}
/* for safari */
@-webkit-keyframes spin{
0%{
-webkit-transform: rotate(0deg) ;
}
100%{
-webkit-transform: rotate(360deg);
}
}
@keyframes spin{
0%{
transform: rotate(0deg) ;
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<h1 align="center">How to make a loader html/css</h1>
<div class="loader"></div>
</body>
</html>
No comments:
Post a Comment