Minishop2 прелоадер в mFilter2
Может кто подскажет как поставить прелоадер в mFilter2, что бы он появлялся тогда, когда фильтруешь товар?
Пример прелоадера
/* LOADER */
.wrapper {
height: 50px;
margin-top: calc(50vh — 25px);
margin-left: calc(50vw — 100px);
width: 180px;
}
.circle {
border-radius: 50%;
border: 3px #0a0a0a solid;
float: left;
height: 50px;
margin: 0 5px;
width: 50px;
}
.circle-1 {
animation: move 1s ease-in-out infinite;
}
.circle-1a {
animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
.circle-2 {
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% {transform: translateX(0);}
100% {transform: translateX(60px);}
}
.circle-1a {
margin-left: -55px;
opacity: 0;
}
.circle-3 {
animation: circle-3 1s ease-in-out infinite;
opacity: 1;
}
@keyframes circle-3 {
0% {opacity: 1;}
100% {opacity: 0;}
}
Пример прелоадера
.wrapper {
height: 50px;
margin-top: calc(50vh — 25px);
margin-left: calc(50vw — 100px);
width: 180px;
}
.circle {
border-radius: 50%;
border: 3px #0a0a0a solid;
float: left;
height: 50px;
margin: 0 5px;
width: 50px;
}
.circle-1 {
animation: move 1s ease-in-out infinite;
}
.circle-1a {
animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
.circle-2 {
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% {transform: translateX(0);}
100% {transform: translateX(60px);}
}
.circle-1a {
margin-left: -55px;
opacity: 0;
}
.circle-3 {
animation: circle-3 1s ease-in-out infinite;
opacity: 1;
}
@keyframes circle-3 {
0% {opacity: 1;}
100% {opacity: 0;}
}
Комментарии: 2
Как поставить не знаю, но: если фильтрация выполняется менее чем за 2 секунды – он не нужен, его попросту не будет видно, а если фильтрация выполняется больше двух секунд, то надо заняться оптимизацией.
Можно попробовать потыкаться на JS события
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.