Small Box 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 or something
then click here and get latest design free
How to design Best Product card in2020?
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 CSSHere 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 puzzle type loader using only html and CSS?
loader.html
|
<!DOCTYPE html>
<html>
<head>
<title>loader</title>
<style>
/*
100% / 24 :
4.17 8.33 12.50 16.67 20.83 25.00
29.17 33.33 37.50
41.67 45.83 50.00
54.17 58.33 62.50
66.67 70.83 75.00
79.17 83.33 87.50
91.67 95.83 100.0
*/
:root {
--size: 40vmin;
--dur: 4s;
--main-color:
#5ab5fa;
--bg-color: black;
--d: calc(var(--size) / 4.242);
--nd:
calc(var(--size) / -4.242);
}
body {
background:
var(--bg-color);
}
div {
width: var(--d);
height:
var(--d);
border:
calc(var(--size) / 80)
solid
var(--bg-color);
box-sizing:
border-box;
position: fixed;
top: calc(50vh - var(--d) / 2);
left: calc(50vw
- var(--d) / 2);
background:
var(--main-color);
animation: __
var(--dur) linear infinite;
}
div:nth-child(1) { animation-name: anim1 }
div:nth-child(2) { animation-name: anim2 }
div:nth-child(3) { animation-name: anim3 }
div:nth-child(4) { animation-name: anim4 }
div:nth-child(5) { animation-name: anim5 }
div:nth-child(6) { animation-name: anim6 }
@keyframes anim1 {
0.00%, 75.00%,
100% {
transform:
rotate(45deg)
translate(var(--d),
0);
} 4.17%, 12.50%
{
transform:
rotate(45deg)
translate(0, 0);
} 16.67%, 41.67%
{
transform:
rotate(45deg)
translate(0, var(--nd));
} 45.83%, 70.83%
{
transform:
rotate(45deg)
translate(var(--d), var(--nd));
}
}
@keyframes anim2 {
0.00%, 4.17%,
79.17%, 100% {
transform:
rotate(45deg)
translate(var(--d), var(--nd));
} 8.33%, 33.33%
{
transform:
rotate(45deg)
translate(var(--d), 0);
} 37.50%, 45.83%
{
transform:
rotate(45deg)
translate(0, 0);
} 50.00%, 75.00%
{
transform:
rotate(45deg)
translate(0, var(--nd));
}
}
@keyframes anim3 {
0.00%, 8.33%,
83.33%, 100% {
transform:
rotate(45deg)
translate(0, var(--nd));
} 12.50%, 37.50%
{
transform:
rotate(45deg)
translate(var(--d), var(--nd));
} 41.67%, 66.67%
{
transform: rotate(45deg)
translate(var(--d), 0);
} 70.83%, 79.17%
{
transform:
rotate(45deg)
translate(0, 0);
}
}
@keyframes anim4 {
0.00%, 16.67%,
91.67%, 100% {
transform:
rotate(45deg)
translate(0, var(--d));
} 20.83%, 29.17%
{
transform:
rotate(45deg)
translate(0, 0);
} 33.33%, 58.33%
{
transform:
rotate(45deg)
translate(var(--nd), 0);
} 62.50%, 87.50%
{
transform:
rotate(45deg)
translate(var(--nd), var(--d));
}
}
@keyframes anim5 {
0.00%, 20.83%,
95.83%, 100% {
transform:
rotate(45deg)
translate(var(--nd), var(--d));
} 25.00%, 50.00%
{
transform: rotate(45deg)
translate(0, var(--d));
} 54.17%, 62.50%
{
transform:
rotate(45deg)
translate(0, 0);
} 66.67%, 91.67%
{
transform:
rotate(45deg)
translate(var(--nd), 0);
}
}
@keyframes anim6 {
0.00%, 25.00%,
100% {
transform:
rotate(45deg)
translate(var(--nd), 0);
} 29.17%, 54.17%
{
transform:
rotate(45deg)
translate(var(--nd), var(--d));
} 58.33%, 83.33%
{
transform:
rotate(45deg)
translate(0, var(--d));
} 87.50%, 95.83%
{
transform:
rotate(45deg)
translate(0, 0);
}
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
|
|
|
0 coment�rios: