How do I add a new loading

Hi there!

Thanks for contacting us.

Did you try the first way or the second way, please?

If you are trying to use the custom CSS part then actually the class name has changed a bit. So kindly use '.sp-pre-loader' instead of '.sp-preloader'. Here is the sample code for you:

.sp-pre-loader > div {
   pointer-events: none;
   width: 2.5em;
   height: 2.5em;
   border: 0.4em solid transparent;
   border-color: #eee;
   border-top-color: #3E67EC;
   border-radius: 50%;
   animation: loadingspin 1s linear infinite;
   background: none;
}
.sp-pre-loader > div:after {
   content: none;  
}
@keyframes loadingspin {
   100% {
           transform: rotate(360deg)
   }
}

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Hope this helps!

Best Regards