Yo,
just a small detail from my current project. Its the search filter for tires e-commerce website.
Tooltips to help understand the data
Preloader on change of values
Code for preloader
Its open. Take it if you want.
HTML
<div class="preloader">
<div class="circ1"></div>
<div class="circ2"></div>
<div class="circ3"></div>
<div class="circ4"></div>
</div>
CSS
.ajaxLoader .preloader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 70px;
height: 30px;
text-align: center;
}
.preloader > div {
background-color: white;
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
-webkit-animation: stretchdelay 0.7s infinite ease-in-out;
animation: stretchdelay 0.7s infinite ease-in-out;
}
.preloader .circ2 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.preloader .circ3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.preloader .circ4 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.preloader .circ5 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: translateY(-10px) }
20% { -webkit-transform: translateY(-20px) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
} 20% {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
}
... sorry for the lame indentation.
Andrej Cibík @andrejcibik
Web design | Web development | Logo design