上效果图，用截屏工具制作的，看起来有点卡，在网页上面显示还是不错的。

CSS代码：

<style type="text/css">
      .loader{
        position: absolute;
        width: 2.5em;
        height: 2.5em;
        //border: 1px solid rgba(100,156,136,0.15);
        border-radius: 50%;
        //box-shadow: 0 0 0.5em rgba(100,156,136,0.75);
        transform: rotate(165deg);
        animation:rotate 2s infinite;
      }

      @keyframes rotate {
         0%{
             transform: rotate(0deg);
         }
         100%{
             transform: rotate(360deg);
         }
      }

      .loader::before,.loader::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.25em;
        transform: translate(-50%,-50%);
      }

      .loader::before{
        animation: before 2s infinite;
      }

      @keyframes before {
        0%{
          width: 0.5em;
          box-shadow:
          1em -0.5em 0.5em rgba(100,156,136,0.75),
          -1em 0.5em 0.5em rgba(150,120,20,0.75);
        }
        55% {
          width: 2.5em;
          box-shadow:
            0 -0.5em rgba(100,156,136,0.75),
            0 0.5em rgba(150,120,20,0.75);
       }
       70% {
         width: 0.5em;
         box-shadow:
          -1em -0.5em rgba(100,156,136,0.75),
           1em 0.5em rgba(150,120,20,0.75);
       }
       100% {
         box-shadow:
          1em -0.5em rgba(100,156,136,0.75),
          -1em 0.5em rgba(150,120,20,0.75);
       }
      }

      .loader::after{
        animation: after 2s infinite;

      }


    @keyframes after{
      0%{
        height: 0.5em;
        box-shadow:
        -0.5em -1em 0.5em rgba(200,56,36,0.75),
        0.5em 1em 0.5em rgba(50,60,80,0.75);
      }
      55% {
        height: 2.5em;
        box-shadow:
         -0.5em 0 rgba(200,56,36,0.75),
         0.5em 0 rgba(50,60,80,0.75);
     }
     70% {
       height: 0.5em;
       box-shadow:
       -0.5em 1em rgba(200,56,36,0.75),
       0.5em -1em rgba(50,60,80,0.75);
     }
     100% {
       box-shadow:
       -0.5em -1em rgba(200,56,36,0.75),
       0.5em 1em rgba(50,60,80,0.75);
     }
    }
    }
    </style>

HTML：

  <body>
    <div class="loader">

    </div>
  </body>