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:
Code:
<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" /></div>

with this:
Code:
<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:
Code:
var spinner = "<img src='" + spinner_image +"' alt='' />";

to this:
Code:
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)

Code:
#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


Forum Jump:


Users browsing this thread: 1 Guest(s)