Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Font Awesome - loading spinner
#1
Information 
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!
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#2
Very nice tutorial, I am a fan of image based spinner images Smile
Reply
#3
thanks
good topic
Reply
#4
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
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#5
(11-02-2018, 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 ?

What goes around comes around



Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)