MyBB Group

Full Version: FontAwesome (v5) - loading spinner
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
To replace default MyBB spinner by a modern good looking FontAwesome spinner you will need to apply these changes:

- FontAwesome v5.x library is required, please load it on your website

1) Open "headerinclude" template and find this block of code:
var spinner = "<img src='" + spinner_image +"' alt='' />";

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

2) Open "showthread_quickreply" template and find this block of code:
<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" /></div>

and replace it with this one:
<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>
*note: do not forget to apply the code above to all places where you might have the spinner

3) Open your "global.css" in your theme and add these few line of code below at the end of file:
#quickreply_spinner .fas {
font-size: 36px;
}

4) You are done, refresh your page (Ctrl+F5) and check the result!