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

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #376650 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    167 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 1 vote 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
    30 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).

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

You must be logged in to reply to this topic.