Нужно установить прелоадер с анимированной вращающейся штукой. Взял отсюда Conical Spinner, но он не вращается. Подскажите, что поправить?
Код HTML
<div class="wrapper">
<div class="conical"></div>
</div>
Код CSS
.wrapper {
width: 100%;
height: 100%;
}
.conical{
background-image: url('../../img/preloader.png');
background-position: 50%;
background-size: cover;
width: 100px;
height: 100px;
border-radius: 100%;
-webkit-mask: radial-gradient( circle closest-side, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0) 84%, hsla(0, 0%, 0%, 1) 86%, hsla(0, 0%, 0%, 1) 100%) no-repeat 50% border;
-webkit-animation: clockwise 0.75s ease-in-out infinite;
animation: clockwise 0.75s ease-in-out infinite;
}
@-webkit-keyframes clockwise
{
to {transform: rotate(360deg) translatez(0);}
}
@keyframes clockwise
{
to {transform: rotate(360deg) translatez(0);}
}
@-webkit-keyframes counter-clockwise
{
to {transform: rotate(-360deg) translatez(0);}
}
@keyframes counter-clockwise
{
to {transform: rotate(-360deg) translatez(0);}
}
@-webkit-keyframes bounce
{
50% {transform: translatey(-20px);}
100% {transform: translatey( 20px);}
}
@keyframes bounce
{
50% {transform: translatey(-20px);}
100% {transform: translatey( 20px);}
}
@-webkit-keyframes zoom
{
to {
width: calc(250px + 20px);
margin-left: calc(-125px - 10px);
margin-top: calc(-125px - 10px);
border-width: 10px;
border-color: hsla(0, 0%, 100%, 1);
}
}
@-webkit-keyframes zoom
{
to {
width: calc(250px + 20px);
margin-left: calc(-125px - 10px);
margin-top: calc(-125px - 10px);
border-width: 10px;
border-color: hsla(0, 0%, 100%, 1);
}
}
@-webkit-keyframes follow
{
0% { transform: translatex(-45px); }
100% { transform: translatex( 60px); }
}
@keyframes follow
{
0% { transform: translatex(-45px); }
100% { transform: translatex( 60px); }
}
а результат плачевный - вот так вот и стоит без движения