Explore the community Forums Lectora Tips and tricks Want a spinner?

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #376650 Score: 2
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    175 pts
    @Klaatu

    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.

    This post has received 2 votes up.
    Attachments:
    1. Spinners.zip
    #377165 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    37 pts
    @JasonADal

    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).

    #388866 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    3 pts
    @zliquorman1276

    Is there an advantage to creating the spinning effect this way vs creating an animated .gif image?

    #388895 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    175 pts
    @Klaatu

    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.

    This post has received 1 vote up.
    #389116 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    3 pts
    @zliquorman1276

    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?

    #389178 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    175 pts
    @Klaatu

    If you post your try, I will take a look at it.

    #389211 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    3 pts
    @zliquorman1276

    Here is my attempt.

    • This reply was modified 1 month, 3 weeks ago by Profile photo of Zachary Liquorman Zachary Liquorman. Reason: Updated attached .zip to include .awt file
    #389273 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    175 pts
    @Klaatu

    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.

    #389280 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    3 pts
    @zliquorman1276

    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!

    #389287 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    175 pts
    @Klaatu

    Awesome! You’re welcome.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.