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.
Wow, that’s excellent, thank you very much for the code and quick response.
Let me try that out and I will give you an update.
Thanks again, very much appreciate this.
Cheers!