I would advise you to do this with custom styling in your theme. You can overrule the classes used in the progress bar.
You need to add some CSS code
1- download your custom preloader gif and put it close to the custom.css file
2- open custom.css file
3- use class “. mx-progress-indicator ” to modify the preloader
4- then run your code and tell us your feedback
like :
.mx-progress-indicator{
background-image: url(../preloader/preloader.gif) !important;
height: 84px;
width: 83px;
background-repeat: no-repeat;
background-size: 85px;
margin: 0 auto;
}
you can use this code in console then the progress bar will appear
var x = mx.ui.showProgress()
after that from element you can select the progress bar and change it from inspect , move the classes with new value in your style file
you can use this code in console then the progress bar will appear
var x = mx.ui.showProgress()
after that from element you can select the progress bar and change it from inspect , move the classes with new value in your style file