Want a spinner?

klaatu Community Member Posts: 986 ☆ Roadie ☆
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 60x60 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.


  • jasonadal
    jasonadal Community Member Posts: 448 ♪ Opening Act ♪
    Awesome sample - I'll likely pull this down to use towards the end of my courses. I've used the mouse cursor styling in some areas to simulate "waiting" periods in the software I'm simulating.

    I was also toying with the idea of ticking bar and fun phrases so that I can add some pop to the end of tests (think Xylons for Battlestar Galactica).
  • zliquorman1276
    zliquorman1276 Community Member Posts: 67 ☆ Roadie ☆
    Is there an advantage to creating the spinning effect this way vs creating an animated .gif image?
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    Hi Zachary, good question.

    Well, like most things, it depends. If you aren't using many or do not require, then it doesn't matter too much, however..

    I would say that higher quality, performance, and control can be considered reasons you might want to go with CSS.

    While it is possible to get past the 256 color restriction and lack of alpha transparency in Gif's by using animated png's (apng, not really gif, but close enough), good ole Micro$oft (Both IE and Edge) does not support them. That could be the biggest reason right there.

    Additionally, CSS animations like the spinner have almost no file weight since the 99.9% of the code is located in the CSS file. For this reason they also do not require additional server requests, which saves load time.

    You might see this argued all over the Internet, CSS animations are smoother and perform better.

    You can dynamically animate/change/morph any part of a CSS animation, you can not do that with an animated gif.

    You do not need additional software or online generators to create CSS animations (although there are some fun playgounds to explore).

    And probably my favorite, it's a chance to learn. CSS animation is here to stay and will only get better and better. Remember, all e-learning is comprised of HTML, CSS and JavaScript - Web pages. The better you are at web design, the more you'll be able to do with your e-learning.
  • zliquorman1276
    zliquorman1276 Community Member Posts: 67 ☆ Roadie ☆
    I decided to dive right into this, as there are some CSS-related things that would be very useful for my Lectora projects.

    To start with, I decided to play around with your spinner example to familiarize myself with its specific implementation within Lectora content. I ran into a few issues before getting off the ground there though:

    First, I tried just opening the .awt file after extracting the .zip contents to see how the spinner looked, and I could not preview it using Lectora's preview features. I was able to view it by opening the html files directly, but for the sake of being able to preview content as you work on it, this isn't ideal. Still, I could see the animation this way.

    So with not being able to really play around with your included example in Lectora, I opted to try creating a spinner object on my own following your example. I copied the spinner.css to my new directory, created the html extension (set to css) with that file as it's target, added the html extension object with the code above, and tried to preview that in Lectora. Again, nothing. I tried publishing to HTML files only, wondering if maybe I could preview it that way like I had your pre-created content, but here it only opened a blank webpage, so nothing there either.

    Any ideas why that might be?
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    If you post your try, I will take a look at it.
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    You need to fix the quotes on the spinner div. When you delete the ones that are there and put in new ones it will work as is. When you copy and paste code from the forum it copies the typographic quotes, not the original dumb quotes (which you need to have).

    Try it and let me know how it works.
  • zliquorman1276
    zliquorman1276 Community Member Posts: 67 ☆ Roadie ☆
    Hilarious timing, I had actually just now realized that was the issue!

    I still can't figure out why your example isn't working, but at least I can re-create it on my own. Thanks mate!
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    Awesome! You're welcome.