Pure CSS animated loading widget

css-animated-loader.html

<style>
    .loading-animation {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        height: 80px;
        text-align: center;
        background-color: #fff;
        border-radius: 10px;
        padding-top: 20px;
    }
    .wrapperloading {
        position: absolute;
        height: 200px;
        width: 200px;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -100px;
    }
    .wrapperloading .loading.up {
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 150px;
        border: 1px solid #fff;
        border-top-color: #fff;
        border-left-color: #555;
        border-right-color: #555;
        border-bottom-color: #fff;
        -webkit-animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
        animation: rotation 3s linear infinite;
    }
    .wrapperloading .loading.down {
        position: absolute;
        height: 100px;
        width: 100px;
        top: 50%;
        margin-top: -50px;
        left: 50%;
        margin-left: -50px;
        border-radius: 150px;
        border: 1px solid #fff;
        border-left-color: #fff;
        border-top-color: #555;
        border-bottom-color: #555;
        border-right-color: #fff;
        -webkit-animation: rotation 1s linear infinite;
        -moz-animation: rotation 1s linear infinite;
        -o-animation: rotation 1s linear infinite;
        animation: rotation 1s linear infinite;
    }
</style>
<div class="loading-animation">
    <div class="wrapperloading">
        <div class="loading up"></div>
        <div class="loading down"></div>
    </div>
</div>