animated loader using only html
and CSS | 2020
Hello guys, 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 somethingthen click here and get latest design free Click here
How to design Best Product card in2020?
design beautiful amination loader using
html and CSS . you learn in this video hoe to design simple aminated loader using html and CSS.
you can use this amination in you
website and after watching this video you can /able to design this type of loader using only
html and CSS
Here we show you how to design animatedloader for website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
How to design round loader using onlyhtml and css?
loader.html
|
<!DOCTYPE html>
<html>
<head>
<title>loader</title>
<style>
body
{
margin:0;
padding:0;
background-color:#000;
}
.loader{
position:absolute ;
top:0;
right:0;
left:0;
bottom:0;
margin:auto ;
border:15px
solid rgba(208, 217, 214);
border-radius:50%;
height:120px;
width:120px;
animation:load
1.3s linear infinite ;
}
.loader2{
border:15px
solid rgb(186, 0, 0);
border-radius:50%;
height:50px;
width:50px;
animation:load
1s linear infinite ;
}
.loader3{
border:15px
solid rgb(0, 186, 167);
border-radius:50%;
height:20px;
width:20px;
animation:load
1s linear infinite ;
}
.loader4{
border:10px
solid red;
border-radius:50%;
height:2px;
width:2px;
animation:load
1s linear infinite ;
}
@keyframes load{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
</style>
</head>
<body>
<div
class="loader">
<div
class="loader2">
<div class="loader3">
<div class="loader4"></div>
</div>
</div>
</div>
</body>
</html>
|
How to set video in background in homepage using html and css?
In this link we are provide you how to
set video as background any web page.
0 coment�rios: