Geeking Out with a barefoot poet - Edition 2 - Transparent Circle that "Draws In"

For today's edition of "Geeking Out" I want to demonstrate how I went about getting a circle that is made from a div (not an image) and "draws in" when the visitor hovers it.  For this project, the client simply wanted a draw in, and fade out on mouse leave....with the circle staying "drawn in" of course while being hovered.

The thickness of the line itself, the size of the circle, and the positioning can all be easily tweaked in CSS for the particular container (div) they are being applied over top of.  The idea here was to make the circle transparent in the center, so only the line draws in from an initial color.

In this case the initial circle is white (#fff) and the animated drawing line is a shade of red, particular to this client's brand.  The color can be changed in both CSS and in the jQuery.

jQuery is only used to "hold" the red color long enough to then fade it out to the white again...and this is done using a callback that checks if the CSS animation has completed.  If that's not done, and the visitor hovers the circle but doesn't wait for it to finish drawing, it would suddenly be solid red and fade out.  So jQuery has a nifty ability to check if the CSS animation has completed and only fire off it's actions after the animation completes...if the animation get's through half and the visitor mouse's away, the jQuery never fires cos it doesn't need to.

In this case the client's site is not live yet, so I can't demonstrate it on the live version, but the full code is in a jsfiddle where you can see it, play with it, learn from it, etc.

Here it is: jsfiddle

Hope you enjoy and maybe even gained something from this!

If you like this series, lemme know, I like sharing this stuff and helping others in their web development journey if I can...and learning from others more experienced than me in ways I could have done things better!

Follow me for more of this, poetry and photography @abarefootpoet