MyBB Community Forums

Do you wanna modern spinner and replace the old default one? There is a tutorial for Font Awesome spinner. All credits go to @Eric J. who help me a lot.

In your showthread_quickreply template (and anywhere else you might have a spinner), replace this:

<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" /></div>

with this:

<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" style="display: none;" /><i class="fa fa-spinner fa-spin"></i></div>

You'll also want to edit the variables in your headerinclude template for things like quickedit and multiquote, so change this:

var spinner = "<img src='" + spinner_image +"' alt='' />";

to this:

var spinner = "<img src='" + spinner_image +"' alt='' style='display: none' /><i class='fa fa-spinner fa-spin'></i>";

CSS part
Add into global.css this line of code (you can style this spinner)

#quickreply_spinner .fa {
font-size: 36px;
}

Save your changes, hard refresh your browser (Ctrl+F5) and try it, enjoy!

Very nice tutorial, I am a fan of image based spinner images

So you want a modern spinner and replace the old default one?

Here is a tutorial for Font Awesome spinner. All original credits go to @Eric J. and @Eldenroot for the original tutorial.

Simply modified for Font Awesome 5 usage by: Vintagedaddyo

In your showthread_quickreply template (and anywhere else you might have a spinner), replace this:

<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" /></div>

with this:

<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" style="display: none;" /><i class="fas fa-spinner fa-spin"></i></div>

You'll also want to edit the variables in your headerinclude template for things like quickedit and multiquote, so change this:

var spinner = "<img src='" + spinner_image +"' alt='' />";

to this:

var spinner = "<img src='" + spinner_image +"' alt='' style='display: none' /><i class='fas fa-spinner fa-spin'></i>";

CSS part:

Add into global.css this line of code (you can style this spinner)

#quickreply_spinner .fas {
font-size: 36px;
}

*Simply updated for FA5 usage while compiling, creating and updating all FA5 related tuts here: https://community.mybb.com/thread-220017...15632.html

(2018-11-02, 08:21 PM)vintagedaddyo Wrote: [ -> ]with this:

<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" style="display: none;" /><i class="fas fa-spinner fa-spin"></i></div>

Why does the <img > stay in there ?

Good tips...

Can you change the color to something else in the code?

^ color property can be added to css style code

#quickreply_spinner .fas {
font-size: 36px;
color: #0000ff;
}

Thanks again .m.