Edit in JSFiddle

<div class="t">
    <div class="tc">
        <div class="loader">
            <div class="left"><span></span></div>
            <div class="right"><span></span></div>
        </div>
    </div>
</div>

/* page */

html,
body {
    height: 100%;
    margin: 0
}

body {
    background-image: url('http://thumbs.media.smithsonianmag.com//filer/6d/20/6d207ae8-0c3c-455a-8ff2-8d3a7cf37ce0/smithsonian-photo-contest-winner-2012-crop.jpg__800x600_q85_crop.jpg');
    background-position: center center;
    background-size: cover;
}

.t {
    width: 100%;
    height: 100%;
    display: table;
}

.tc {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

/* radial loader */

.loader {
    display: inline-block;
    position: relative;
}

.left,
.right {
    margin-top: -50px;
    margin-left: -50px;
    position: absolute;
    clip: rect(0, 100px, 100px, 50px);
}

.right {
    clip: rect(0px, 50px, 100px, 0px);
}

.left span,
.right span {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: absolute;
    opacity: 0.7;
    border: 10px solid #fff;
}

.left span {
    clip: rect(0px, 50px, 100px, 0px);
    -webkit-animation: rotate-left 5s infinite linear;
    -moz-animation: rotate-left 5s infinite linear;
    -ms-animation: rotate-left 5s infinite linear;
    -o-animation: rotate-left 5s infinite linear;
    animation: rotate-left 5s infinite linear;
}

.right span {
    clip: rect(0, 100px, 100px, 50px);
    -webkit-animation: rotate-right 5s infinite linear;
    -moz-animation: rotate-right 5s infinite linear;
    -ms-animation: rotate-right 5s infinite linear;
    -o-animation: rotate-right 5s infinite linear;
    animation: rotate-right 5s infinite linear;
}

/* rotate-left */

@-webkit-keyframes rotate-left {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes rotate-left {
    0% { -moz-transform: rotate(0deg); }
    50% { -moz-transform: rotate(180deg); }
    100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes rotate-left {
    0% { -ms-transform: rotate(0deg); }
    50% { -ms-transform: rotate(180deg); }
    100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes rotate-left {
    0% { -o-transform: rotate(0deg); }
    50% { -o-transform: rotate(180deg); }
    100% { -o-transform: rotate(180deg); }
}
@keyframes rotate-left {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(180deg); }
}

/* rotate-right */

@-webkit-keyframes rotate-right {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes rotate-right {
    0% { -moz-transform: rotate(0deg); }
    50% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes rotate-right {
    0% { -ms-transform: rotate(0deg); }
    50% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes rotate-right {
    0% { -o-transform: rotate(0deg); }
    50% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(180deg); }
}
@keyframes rotate-right {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}