How to change the standard progress bar with a custom one?

0
Hi guys, Is there a nice way to change the standard progress bar with a custom color, gif etc than the black pointing one?
asked
4 answers
3

I would advise you to do this with custom styling in your theme. You can overrule the classes used in the progress bar.

answered
2

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;
}

 

answered
2

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

 

answered
0

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

 

answered