Square Progress Bars animated loader using html and CSS.
Hello guys, Planics Devloper is
providing 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 hover or
something then click here and get latest design
free Click here
How to design Best product card hoverin 2020?
design beautiful snake amination loader using html and CSS . you learn in this video how to design square progress bar aminated loader using html and CSS.
How to design different type ofanimation in one loader using html and css?
Free Cards Effect in HTML with CSS
How to design square type loader usingonly html and CSS?
How to design snake animated loader using html and CSS?
how to design google animated loader for website so please check it out in YouTube.Here we show snake square animated loader using pure html and CSS
loader.html
<!DOCTYPE html>
<html>
<head>
<title>Snake-loader</title>
<link
href="https://fonts.googleapis.com/css?family=Aleo|Slabo+27px"
rel="stylesheet">
<style>
body {
margin:0;
padding:0;
}
/* Loader Starts
from here */
#container
{ display:block;
position:fixed;
top:0;
height:100vh;
width:100vw;
background-image:-webkit-linear-gradient(right,#134E5E,#71B280);
z-index:5;
}
#load
{
position:relative ;
font-size:22px;
color:white;
margin:auto;
text-align:center;
font-family:
'Aleo', serif;
user-select:none;
top:140px;
}
#loader
{
display:block ;
position:relative ;
height:100px;
width:100px;
margin:auto;
top:calc( 50% -
100px);
border:10px
dashed #93F9B9;
box-shadow:0 0 0
10px rgba(0,0,0,.4), inset 0 0 0 10px rgba(0,0,0,.2);
animation:rotate
8s linear infinite;
}
@keyframes rotate {
100%
{transform:rotate(-360deg);}
}
#container:before {
color:white;
content:"23%";
font-family:
'Aleo', serif;
display:block ;
text-align:center
;
position:relative ;
margin:auto;
top:calc( 50% -
25px);
font-size:22px;
animation:percent 2.97s infinite;
}
@keyframes percent {
0%
{content:'0%';}
20%
{content:'22%';}
30%
{content:'30%';}
40%
{content:'43%';}
50%
{content:'59%';}
60%
{content:'64%';}
70%
{content:'71%';}
80%
{content:'82%';}
90%
{content:'98%';}
100%
{content:'100%';}
}
#loader > span
{
display:block ;
position:absolute ;
height:100%;
width:100%;
top:0; left:0;
overflow:hidden;
}
#loader > span:before {
content:"";
display:block ;
position:absolute ;
height:100%;
width:100%;
top:0; left:0;
border:none;
border-top:10px
solid white;
animation:animate 2s linear infinite;
}
@keyframes animate {
0% {left:-100%;}
25% {left:0;}
50%,100%
{left:100%;}
}
#loader > span:nth-child(2)
{
transform:rotate(90deg);
}
#loader > span:nth-child(3)
{
transform:rotate(180deg);
}
#loader > span:nth-child(4)
{
transform:rotate(270deg);
}
#loader > span:nth-child(2):before
{
animation-delay:.5s;
}
#loader > span:nth-child(3):before
{
animation-delay:1s;
}
#loader > span:nth-child(4):before
{
animation-delay:1.5s;
}
</style>
</head>
<body>
<!-- Loader
starts -->
<div
id="container">
<div
id="loader" >
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<br><br><br>
<div
id="load"></div>
<center>
</center>
</div>
</body>
</html>
|
0 coment�rios: