使用css实现loading的加载

上面是 通过css实现loading的加载的效果图

html代码

1     <div id="caseViolette">
2         <div id="cercle">
3            <div id="cercleCache"></div>
4         </div>
5         <div id="load">
6           <p>loading</p>
7         </div>
8         <div id="point"></div>
9       </div>

css代码

 1 #caseViolette {
 2   background-color : #592780;
 3   height : 140px;
 4   width : 150px;
 5   padding-top : 10px;
 6   float : left;
 7   position : relative;
 8 }
 9 #caseViolette #load {
10   color : #D8A6FF;
11   font-family : calibri;
12   text-align : center;
13   margin-top : 100px;
14 }
15 #cercle {
16   height : 50px;
17   width : 50px;
18   position : absolute;
19   top : 45px;
20   left : 45px;
21   border-radius : 50%;
22   background : linear-gradient(#D8A6FF,#FFECEE);
23   animation : turnCercle 2s infinite;
24   -webkit-animation : turnCercle 5s infinite;
25   animation-timing-function : ease-in-out;
26   -webkit-animation-timing-function : ease-in-out;
27 }
28
29 @-webkit-keyframes turnCercle {
30   0% {-webkit-transform : rotate(0deg);}
31   100% {-webkit-transform : rotate(10080deg);}
32 }
33
34 @keyframes turnCercle {
35   0% {transform : rotate(0deg);}
36   100% {transform : rotate(10080deg);}
37 }
38
39 #cercleCache {
40   height : 40px;
41   width : 40px;
42   position : absolute;
43   border-radius : 50%;
44   background-color : #592780;
45   z-index : 5;
46 }