Animated panda loader using html and CSS | loader | 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 something then click here and get latest design free
Here we show you how to design animated loader for
website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
loader.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,inital-scale=-1.0">
<title>Panda loader</title>
</head>
<body>
<div class="loader"><span
class="sleep"></span></div>
<style>
body{
position: relative;
min-height: 100vh;
width: 0;
padding: 0;
background: red;
}
.loader{
width: 100vw;
height: 100vh;
background: white;
position: absolute;
}
.sleep{
width: 50vmin;
height: 50vmin;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-75%);
background:url("https://media1.tenor.com/images/0546caeb51e42b4227d0f91a8b6d3e4f/tenor.gif?itemid=11572819");
background-size: cover;
}
.sleep::before{
content: " ";
position: absolute;
bottom: -10px;
font-weight:900;
left:35%;
transition: 0.6s;
animation: try 2s ease infinite;
}
@keyframes try{
0%{
content: "s";
}
5%{
content: "sl";
}
10%{
content: "sle";
}
15%{
content: "slee";
}
20%{
content: "sleep";
}
25%{
content: "sleepi";
}
30%{
content: "sleepin";
}
35%{
content: "sleeping";
}
45%{
content: "sleeping.";
}
60%{
content: "sleeping...";
}
100%{
content: "sleeping......";
}
}
</style>
</body>
<script>
alert("thank you gays, its panda loader you can set in uour
website error page and also main page respective your site")
</script>
</html>
|
In this link we are provide you how to set video as
background any web page.
0 coment�rios: