Amazing Loading Animation with auto stop and play Using Only HTML & CSS
Hello guys, Welcome in planics developer We are giving
HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from
our post otherwise watch our video on blog.
If you want to design card
or something then click here and get latest design free
Here we show you how to design animated round loader
for website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
How to design pure CSS Loader using html? How to set
animated round loader for website ?
loader.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.center{
text-align:center;
/* #cc208e
0%, #6713d2 */
}
.loader {
position:absolute
;
top:20%;
Left:45%;
border: 16px
solid #f3f3f3;
border-radius: 50%;
border-top:
15px solid #cc208e;
width:
120px;
height:
120px;
-webkit-animation: spin 2s linear
infinite;
animation:
spin 2s linear infinite;
}
.loader1{
position:absolute ;
Left:45%;
top:450px;
border: 16px
groove #f3f3f3;
border-radius: 50%;
border-bottom: 14px solid
#cc208e;
border-top:
14px solid #6713d2;
width:
120px;
height:
120px;
-webkit-animation: spin 1.5s linear
infinite;
animation:
spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {
-webkit-transform:
rotate(360deg); }
}
@keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); }
}
</style
</head>
<body class="center">
<div class=" loader"></div>
<div class="loader1"></div>
</body>
</html>
|
In this link we are provide you how to set video as
background any web page.
0 coment�rios: