HTML and CSS for a CSS3 (mobile-OS hardware accelerated) loading spinner.

loader.css

#spinnerContainer { 
    display: none; 
    position: absolute; 
    top: 340px; 
    right: 350px; 
    width: 54px; 
    height: 54px; 
}

#spinner {
    position: relative;
    width: 54px;
    height: 54px;
    display: inline-block;
}

#spinner div {
    width: 12%;
    height: 26%;
    background: #000;
    position: absolute;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

#spinner #bar1 {-webkit-transform:rotate(0deg) translate3d(0, -142%, 0); -webkit-animation-delay: 0s;}
#spinner #bar2 {-webkit-transform:rotate(30deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.9167s;}
#spinner #bar3 {-webkit-transform:rotate(60deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.833s;}
#spinner #bar4 {-webkit-transform:rotate(90deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.75s;}
#spinner #bar5 {-webkit-transform:rotate(120deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.667s;}
#spinner #bar6 {-webkit-transform:rotate(150deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.5833s;}
#spinner #bar7 {-webkit-transform:rotate(180deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.5s;}
#spinner #bar8 {-webkit-transform:rotate(210deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.41667s;}
#spinner #bar9 {-webkit-transform:rotate(240deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.333s;}
#spinner #bar10 {-webkit-transform:rotate(270deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.25s;}
#spinner #bar11 {-webkit-transform:rotate(300deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.1667s;}
#spinner #bar12 {-webkit-transform:rotate(330deg) translate3d(0, -142%, 0); -webkit-animation-delay: -0.0833s;}

@-webkit-keyframes fade { from {opacity: 1;} to {opacity: 0.25;} }

loader.html

<div id="spinnerContainer">
    <div id="spinner">
        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>
        <div id="bar6"></div>
        <div id="bar7"></div>
        <div id="bar8"></div>
        <div id="bar9"></div>
        <div id="bar10"></div>
        <div id="bar11"></div>
        <div id="bar12"></div>
    </div>
</div>

Some would argue that this is horrendous and should never be used - these people will often, instead, say "use an animated gif, do some magic, etc".

This is hardware accelerated, which doesn't get. Your perfect "semantic world" does not exist with the Mobile landscape (and arguably, the regular web one). Aim for performance and ease of use, please.

Credit where credit is due; much of this can be attributed to 37Signals, and further back up the chain to Kilian Valkhof. I simply made it HW accelerated.