Animated round buffering loader using html and CSS | 2020 | 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.
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
loader for website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
How to design loader using only htmland css?
loader.html
<!DOCTYPE html>
<html>
<head>
<title>Loader</title>
<style>
body{
background: #000;
}
.container-load{
transform: translate(-50%,80%);
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
top:50%;
left:50%;
animation: colorize 1s ease infinite;
overflow: hidden;
}
@keyframes colorize{
20%
{filter: hue-rotate(72deg);}
40%
{filter: hue-rotate(144deg);}
60%
{filter: hue-rotate(216deg);}
80%
{filter: hue-rotate(288deg);}
100%
{filter: hue-rotate(360deg);}
}
.loader{
width: calc(100% - 12px);
height: calc(100% - 12px);
position: absolute;
border: 5px solid #000;
border-top: 10px solid #09f;
border-radius: 50%;
animation-fill-mode: forwards;
animation:rotate 5s 0.5s linear infinite;
}
@keyframes rotate{
0%{transform: rotate(360deg);}
10%{transform: rotate(330deg);}
20%{transform: rotate(300deg);}
30%{transform: rotate(270deg);}
40%{transform: rotate(240deg);}
50%{transform: rotate(210deg);}
60%{transform: rotate(180deg);}
70%{transform: rotate(150deg);}
80%{transform: rotate(120deg);}
90%{transform: rotate(90deg);}
100%{transform: rotate(0deg);}
}
</style>
</head>
<body>
<div
class="container-load">
<div
class="loader">
<div class="loader">
<div class="loader">
<div
class="loader">
<div class="loader">
<div
class="loader">
<div
class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
<div class="loader">
</div>
</div>
</div>
</div>
</div>
</div>
</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: