Easy to implement spinners. If you’re interested, in the zip file you will find spinner.css. Save this to re-use whenever you want to add spinners to your project.
To add a spinner, first add an HTML Extension – Cascading style sheet – browse for file and select the spinner.css you just saved.
Next, to add a spinner add an HTML extension – custom DIV to your page. Size it at 60×60 and in its appearance tab add a class named noClip. Now, with the custom div selected click on Edit to open the extension. Add the following: <div class=”spinner”></div>
That’s all you need to do.
To customize you can edit the CSS.
You can change the size of the spinner as follows: open the spinner.css file in a text editor. Find the spinner class (.spinner) and change both the height and width. Do this for the before and after psuedo classes (.spinner:before, .spinner:after). You must make all four values the same (currently 20px).
You can change the thickness of the spinning part by adjusting the border width (currently 1px) in the .spinner:after class. You can also change the color of the top and bottom of the spinner by changing the color value of border-top-color and/or border-bottom-color (currently #1f5fc6) .
To adjust the speed of the spinning change the .5s value in the animation rule also part of the .spinner:after class.
Have fun playing around with this and I hope it can add a little pop to your projects.