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

CSS代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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：

?
1
2
3
4
5
<body>
  <div class="loader">
 
  </div>
</body>