How to design rainbow 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 Product card orsomething then click here and get latest design free Click here
How to design Best card hover in 2020?
design beautiful squre 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 animated
loader for website so please check it out in YouTube.
Free Cards Effect in HTML with CSSHow to design puzzle type loader usingonly html and CSS?
How to design multicolor animated loader using html and CSS?
loader.html
<!DOCTYPE html>
<html>
<head>
<title>Loader</title>
<style>
body
{
background-color:black;
}
.loader
{
width: 142px;
height: 142px;
padding: 0;
margin: 250px
auto;
animation:
rotate 10s infinite linear;
list-style:
none;
position:
relative;
}
.loader li
{
border:6px solid
transparent;
border-bottom:
none;
transform-origin: 50% 100% 0;
position:
absolute;
top: 50%;
left: 50%;
animation:
rotate 3s infinite cubic-bezier(0.09,0.6,0.8,0.03);
}
.loader li:nth-child(1)
{
width: 44px;
height: 22px;
margin: -22px 0
0 -22px;
border-color:
#8B00FF;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
animation-timing-function: cubic-bezier(0.09,0.3,0.12,0.03);
}
.loader li:nth-child(2)
{
width: 58px;
height: 29px;
margin: -29px 0
0 -29px;
border-color: #2E2B5F;
border-top-left-radius: 42px;
border-top-right-radius: 42px;
animation-timing-function: cubic-bezier(0.09,0.6,0.24,0.03);
}
.loader li:nth-child(3)
{
width: 72px;
height: 36px;
margin: -36px 0
0 -36px;
border-color:
#0000FF;
border-top-left-radius: 48px;
border-top-right-radius: 48px;
animation-timing-function: cubic-bezier(0.09,0.9,0.36,0.03);
}
.loader li:nth-child(4)
{
width: 86px;
height: 43px;
margin: -43px 0
0 -43px;
border-color:
#00FF00;
border-top-left-radius: 54px;
border-top-right-radius: 54px;
animation-timing-function: cubic-bezier(0.09,1.2,0.48,0.03);
}
.loader li:nth-child(5)
{
width:100px;
height: 50px;
margin: -50px 0
0 -50px;
border-color:
#FFFF00;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
animation-timing-function: cubic-bezier(0.09,1.5,0.6,0.03);
}
.loader li:nth-child(6)
{
width:114px;
height: 57px;
margin: -57px 0
0 -57px;
border-color:
#FF7F00;
border-top-left-radius: 66px;
border-top-right-radius: 66px;
animation-timing-function: cubic-bezier(0.09,1.8,0.72,0.03);
}
.loader li:nth-child(7)
{
width:128px;
height: 64px;
margin: -64px 0
0 -64px;
border-color: #FF0000;
border-top-left-radius: 66px;
border-top-right-radius: 66px;
animation-timing-function: cubic-bezier(0.09,2.1,0.84,0.03);
}
@keyframes rotate
{
100%
{
transform:
rotate(360deg);
}
}
</style>
</head>
<body>
<ul
class="loader">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
0 coment�rios: