Pure CSS to achieve load around in style

Different projects going round in circles while waiting for the load pattern is different, some traditional circling gif image, is to appear more motion circle was lovely icon. Sometimes the project added to the waiting load the picture will be very illegal and inconsistent with beautiful, so it is necessary to make a use CSS. Here is an example of a pure CSS to achieve a circular motion style.
Circling .gif
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .load-container {
        background-color: #F1F1EA;
        width: auto;
        height: 700px;
        position: relative;
        overflow: hidden;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .loader {
        font-size: 10px;
        margin: 100px auto;
        margin-top: 300px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        text-indent: -9999em;
        position: relative;
        animation: mymove 1.3s infinite linear;
        -webkit-animation: mymove 1.5s infinite linear;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

    @keyframes mymove {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em #46A4C9, 2em -2em 0 0em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 0 #46A4C9;
        }
        12.5% {
            box-shadow: 0 -3em 0 0 #46A4C9, 2em -2em 0 0.2em #46A4C9, 3em 0 0 0 #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em #46A4C9, 2em -2em 0 0 #46A4C9, 3em 0 0 0.2em #46A4C9, 2em 2em 0 0 #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        37.5% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 0 #46A4C9, 2em 2em 0 0.2em #46A4C9, 0 3em 0 0em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        50% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 0em #46A4C9, 0 3em 0 0.2em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        62.5% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 0 #46A4C9, -2em 2em 0 0.2em #46A4C9, -3em 0 0 0 #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        75% {
            box-shadow: 0em -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0.2em #46A4C9, -2em -2em 0 0 #46A4C9;
        }
        87.5% {
            box-shadow: 0em -3em 0 0 #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0 #46A4C9, -2em -2em 0 0.2em #46A4C9;
        }
    }

    @-webkit-keyframes mymove
    /*Safari and Chrome*/
        {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em #46A4C9, 2em -2em 0 0em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 0 #46A4C9;
        }
        12.5% {
            box-shadow: 0 -3em 0 0 #46A4C9, 2em -2em 0 0.2em #46A4C9, 3em 0 0 0 #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em #46A4C9, 2em -2em 0 0 #46A4C9, 3em 0 0 0.2em #46A4C9, 2em 2em 0 0 #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        37.5% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 0 #46A4C9, 2em 2em 0 0.2em #46A4C9, 0 3em 0 0em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        50% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 0em #46A4C9, 0 3em 0 0.2em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        62.5% {
            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 0 #46A4C9, -2em 2em 0 0.2em #46A4C9, -3em 0 0 0 #46A4C9, -2em -2em 0 -1em #46A4C9;
        }
        75% {
            box-shadow: 0em -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0.2em #46A4C9, -2em -2em 0 0 #46A4C9;
        }
        87.5% {
            box-shadow: 0em -3em 0 0 #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0 #46A4C9, -2em -2em 0 0.2em #46A4C9;
        }
    }
</style>

<body>

    <div class='load-container'>
        <div class='loader'></div>
    </div>
    
</body>

</html>
Pure CSS to achieve load around in style

Guess you like
