Hello planetboris,
Thanks for using the Animate It!
What you seek can be easily done using Animate it and a little bit of custom CSS
Here you can find 2 types of spinners that I have created:
https://visas.wpdevcloud.com/3d-spinner/
Please follow these steps:
1. In your WordPress, go to Settings > Animate It! > Custom CSS box and paste the following:
.spinner-3d-wrapper {
perspective: 1200px;
}
.spinner-3d {
animation-name: spinner3d;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
transform-style: preserve-3d;
backface-visibility: visible;
}
@-webkit-keyframes spinner3d {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
@keyframes spinner3d {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
2. Now use these DIVs to add the spinners anywhere you want:
1. Vertical Spinner:
<div class="animated spinner duration8 infinite" style="text-align:center;">
Add Icon/Text Here
</div>
2. 3d Spinner
<div class="spinner-3d-wrapper">
<div class="animated spinner-3d duration8 infinite" style="text-align:center;">
Add Icon/Text Here
</div>
</div>
You can change duration8 to higher or lower to decrease/increase the speed
Please let me know if you face any issues.