Current time: 04-07-2020, 09:54 PM
Hello There, Guest!
  • Search
  •  
    Thread Rating:
    • 0 Vote(s) - 0 Average

    FontAwesome (v5) - loading spinner


    MyBB Group Developer
    #1
    FontAwesome 
    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!
    Like Reply

    Possibly Related Threads…
    Thread Author Replies Views Last Post
    FontAwesome FontAwesome (v5) - usergroup stars Eldenroot 1 1,355 20-08-2019, 07:28 AM
    Last Post: mujeebdgk