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.

.spinner {
    width:64px;
    height:64px;
    background:#161c1f;
    position:relative;
    margin:20px;
}
@-webkit-keyframes blink {
    from { opacity:1 }
    to { opacity:.3 }
}
@-moz-keyframes blink {
    from { opacity:1 }
    to { opacity:.3 }
}
@-o-keyframes blink {
    from { opacity:1 }
    to { opacity:.3 }
}
@keyframes blink {
    from { opacity:1 }
    to { opacity:.3 }
}
.spin-line {
    background:#fff;
    opacity:.3;
    height:6px;
    width:25%;
    position:absolute;
    top:50%; left:50%;
    margin-top:-3px;
    border-radius:3px;
    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;
    -webkit-animation:blink 1s linear infinite;
    -moz-animation:blink 1s linear infinite;
    -o-animation:blink 1s linear infinite;
    animation:blink 1s linear infinite;
}
.sl1 {
    -webkit-transform:rotate(0deg) translate(15px, 0px);
    -moz-transform:rotate(0deg) translate(15px, 0px);
    -ms-transform:rotate(0deg) translate(15px, 0px);
    -o-transform:rotate(0deg) translate(15px, 0px);
    transform:rotate(0deg) translate(15px, 0px);
    -webkit-animation-delay:0;
    -moz-animation-delay:0;
    -o-animation-delay:0;
    animation-delay:0;
}
.sl2 {
    -webkit-transform:rotate(36deg) translate(15px, 0px);
    -moz-transform:rotate(36deg) translate(15px, 0px);
    -ms-transform:rotate(36deg) translate(15px, 0px);
    -o-transform:rotate(36deg) translate(15px, 0px);
    transform:rotate(36deg) translate(15px, 0px);
    -webkit-animation-delay:.1s;
    -moz-animation-delay:.1s;
    -o-animation-delay:.1s;
    animation-delay:.1s;
}
.sl3 {
    -webkit-transform:rotate(72deg) translate(15px, 0px);
    -moz-transform:rotate(72deg) translate(15px, 0px);
    -ms-transform:rotate(72deg) translate(15px, 0px);
    -o-transform:rotate(72deg) translate(15px, 0px);
    transform:rotate(72deg) translate(15px, 0px);
    -webkit-animation-delay:.2s;
    -moz-animation-delay:.2s;
    -o-animation-delay:.2s;
    animation-delay:.2s;
}
.sl4 {
    -webkit-transform:rotate(108deg) translate(15px, 0px);
    -moz-transform:rotate(108deg) translate(15px, 0px);
    -ms-transform:rotate(108deg) translate(15px, 0px);
    -o-transform:rotate(108deg) translate(15px, 0px);
    transform:rotate(108deg) translate(15px, 0px);
    -webkit-animation-delay:.3s;
    -moz-animation-delay:.3s;
    -o-animation-delay:.3s;
    animation-delay:.3s;
}
.sl5 {
    -webkit-transform:rotate(144deg) translate(15px, 0px);
    -moz-transform:rotate(144deg) translate(15px, 0px);
    -ms-transform:rotate(144deg) translate(15px, 0px);
    -o-transform:rotate(144deg) translate(15px, 0px);
    transform:rotate(144deg) translate(15px, 0px);
    -webkit-animation-delay:.4s;
    -moz-animation-delay:.4s;
    -o-animation-delay:.4s;
    animation-delay:.4s;
}
.sl6 {
    -webkit-transform:rotate(180deg) translate(15px, 0px);
    -moz-transform:rotate(180deg) translate(15px, 0px);
    -ms-transform:rotate(180deg) translate(15px, 0px);
    -o-transform:rotate(180deg) translate(15px, 0px);
    transform:rotate(180deg) translate(15px, 0px);
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    -o-animation-delay:.5s;
    animation-delay:.5s;
}
.sl7 {
    -webkit-transform:rotate(216deg) translate(15px, 0px);
    -moz-transform:rotate(216deg) translate(15px, 0px);
    -ms-transform:rotate(216deg) translate(15px, 0px);
    -o-transform:rotate(216deg) translate(15px, 0px);
    transform:rotate(216deg) translate(15px, 0px);
    -webkit-animation-delay:.6s;
    -moz-animation-delay:.6s;
    -o-animation-delay:.6s;
    animation-delay:.6s;
}
.sl8 {
    -webkit-transform:rotate(252deg) translate(15px, 0px);
    -moz-transform:rotate(252deg) translate(15px, 0px);
    -ms-transform:rotate(252deg) translate(15px, 0px);
    -o-transform:rotate(252deg) translate(15px, 0px);
    transform:rotate(252deg) translate(15px, 0px);
    -webkit-animation-delay:.7s;
    -moz-animation-delay:.7s;
    -o-animation-delay:.7s;
    animation-delay:.7s;
}
.sl9 {
    -webkit-transform:rotate(288deg) translate(15px, 0px);
    -moz-transform:rotate(288deg) translate(15px, 0px);
    -ms-transform:rotate(288deg) translate(15px, 0px);
    -o-transform:rotate(288deg) translate(15px, 0px);
    transform:rotate(288deg) translate(15px, 0px);
    -webkit-animation-delay:.8s;
    -moz-animation-delay:.8s;
    -o-animation-delay:.8s;
    animation-delay:.8s;
}
.sl10 {
    -webkit-transform:rotate(324deg) translate(15px, 0px);
    -moz-transform:rotate(324deg) translate(15px, 0px);
    -ms-transform:rotate(324deg) translate(15px, 0px);
    -o-transform:rotate(324deg) translate(15px, 0px);
    transform:rotate(324deg) translate(15px, 0px);
    -webkit-animation-delay:.9s;
    -moz-animation-delay:.9s;
    -o-animation-delay:.9s;
    animation-delay:.9s;
}

One Comment

  1. marinaspas
    July 23, 2012

    wow very impressive :)

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>