animated square loader using html and CSS | 2020 | animated loader
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.
Pure html and CSS design Series ?
If you want to design card
or something then click here and get latest design free
HOW TO DESIGN BEST PRODUCT CARD IN2020?
Here we show you how to design animated Square loader
for website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
HOW TO DESIGN squre LOADER USING ONLY HTMLAND CSS?
loader.html
|
<!DOCTYPE html>
<html>
<head>
<title>Planics Dev</title>
<style>
#back
{
position:absolute;
top:35%;
left:40%;
height:100px;
width:100px;
background-color:#aaa;
}
#rot{
position: absolute;
top:42%;
left:39.9%;
height: 50px;
width: 50px;
background-color: #eb4034;
animation: rot 3s infinite linear;
}
@keyframes rot{
25%{
transform: rotate(90deg);
transform-origin: 100% 100%;
}
50%{
transform: rotate(180deg);
transform-origin: 100% 0%;
}
75%{
transform: rotate(270deg);
transform-origin: 0% 0%;
}
100%{
transform: rotate(360deg);
transform-origin: 0% 0%;
}
}
</style>
</head>
<body>
<div id="back"></div>
<div id="rot"></div>
</body>
</html>
|
In this link we are provide you how to set video as
background any web page.
0 coment�rios: