CSS based loading spinner icon

This is a CSS only loading spinner icon. It’s just a quick experiment I decided to conduct, to see if I can do a loader spinner using only CSS, without any images or JavaScript. It actually turned out much easier than I thought. You can check out the full CSS below. It does look a bit messy but only because of all the vendor prefixes I had to use.

The CSS mainly uses transform, animation and keyframes styles and works in most modern browsers, with the exception of IE9 and below of course. Although at least in IE9 it does render the “first frame” correctly (i.e. the initial state of the loading icon). You can easily tweak colours, thickness, length or spacing of the lines. Oh and the html is dead easy, it’s basically just a .spinner div with a bunch of .spin-line divs inside. If you want to play around with live code you can check out my jsFiddle for it.

If you like this one, you should also check out this spin.js project by Felix Gnass that adds a bit of JavaSscript to give you more flexibility, control and provide better compatibility with older browsers including IE.

Read more »

Crazy long jQuery animation chains for a slideshow widget

So I was recently coding a slideshow widget using jQuery. Nothing fancy – just a box showing one image, you click an arrow, the next/previous image slides in. The code was also very straightforward – get a handle on the “slides” and use index to loop through them. For one of the animations in the transition (there were labels that were animated separately) I used a simple chain, something like $(slide).find(label).animate(). As I was writing it, it hit me, jQuery has pretty robust chains, they allow mixing pretty much every operation you can do on an element – traversal, manipulation, effects, etc. So I decided to see if I could do the entire slideshow functionality as one long chain (well, technically two, one for each arrow). Here is a demo of the slideshow widget in action. Read more »