💻 My web design - Tires e-commerce category page

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