css3,环绕圆环 loading,小组件

一个loading的小组件, 给其他模块调用。先上图

type:cat

type:ball

第一幅loading，老鼠是一个圆形的背景图片，已经转成base64。小猫也是图片也已经转成base64.

老鼠的父div，一直在rotate。

小猫的眼珠，是不动的。动的是小猫的眼球div，眼球div一直在rotate，眼珠是绝对定位在眼球的底部，这样眼球转起来的时候，给人的感觉就是眼珠再转。

第二幅loading的小球也是上面这个原理。

文字的动画，是用宽度，和透明度的变化来实现的。

源代码 css 代码是用less 编写的。并且这个type，涉及到模块化的一点东西。所以下面就贴出，2个loading的 dom和css。

第一幅的css

  1 .loadingcat-wrap {
  2   position: absolute;
  3   left: 0px;
  4   right: 0px;
  5   top: 0px;
  6   bottom: 0px;
  7   z-index: 999;
  8   background-color: rgba(0, 0, 0, 0.6);
  9   box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
 10   display: flex;
 11   justify-content: center;
 12   align-items: center;
 13   flex-direction: column;
 14   overflow: hidden;
 15 }
 16 .loadingcat-wrap .loadingcat {
 17   width: 150px;
 18   height: 150px;
 19   border-radius: 150px;
 20   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJDRTM0ODM2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJDRTM0ODQ2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkNFMzQ4MTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkNFMzQ4MjZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjtjnUMAAAskSURBVHja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);
 21   position: relative;
 22   display: flex;
 23   justify-content: center;
 24   align-items: center;
 25   animation: catspin 3s linear infinite;
 26   animation-play-state: running;
 27 }
 28 @keyframes catspin {
 29   0% {
 30     transform: rotate(1turn);
 31   }
 32   100% {
 33     transform: rotate(0turn);
 34   }
 35 }
 36 .loadingcat-wrap .cat {
 37   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAYAAACSjFpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBEMEQwRkE2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBEMEQwRkI2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MEQwRDBGODZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MEQwRDBGOTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuDgtsEAAAwLSURBVHja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);
 38   width: 56px;
 39   height: 54px;
 40   position: relative;
 41   top: -100px;
 42 }
 43 .loadingcat-wrap .cat .eye {
 44   width: 20px;
 45   height: 20px;
 46   border-radius: 20px;
 47   position: absolute;
 48   animation: scatpin 2s linear infinite;
 49   animation-play-state: running;
 50 }
 51 @keyframes scatpin {
 52   0% {
 53     transform: rotate(1turn);
 54   }
 55   100% {
 56     transform: rotate(0turn);
 57   }
 58 }
 59 .loadingcat-wrap .cat .lefteye {
 60   left: 5px;
 61   top: 15px;
 62 }
 63 .loadingcat-wrap .cat .righteye {
 64   left: 30px;
 65   top: 15px;
 66 }
 67 .loadingcat-wrap .cat .ball {
 68   width: 10px;
 69   height: 10px;
 70   position: absolute;
 71   top: 9px;
 72   left: 5px;
 73   border-radius: 5px;
 74   background-color: #818492;
 75 }
 76 .loadingcat-wrap .text {
 77   color: #fff;
 78   width: 120px;
 79 }
 80 .loadingcat-wrap .text p {
 81   white-space: nowrap;
 82   overflow: hidden;
 83   width: 0px;
 84   animation: textspin 3s ease-in-out infinite;
 85   opacity: 0.7;
 86   filter: alpha(opacity=70);
 87 }
 88 @keyframes textspin {
 89   0% {
 90     width: 0px;
 91     opacity: 0.7;
 92     filter: alpha(opacity=70);
 93   }
 94   50% {
 95     width: 120px;
 96     opacity: 0.7;
 97     filter: alpha(opacity=70);
 98   }
 99   90% {
100     opacity: 0;
101     filter: alpha(opacity=0);
102     width: 120px;
103   }
104   100% {
105     opacity: 0;
106     filter: alpha(opacity=0);
107     width: 120px;
108   }
109 }

View Code

第一幅的dom

 1 <div class="loadingcat-wrap"><!--   
 2 @require "app/component/loading/loadingcat.less" 
 3   -->
 4     <div class="loadingcat">
 5     </div>
 6     <div class="cat">
 7         <div class="eye lefteye">
 8             <div class="ball"></div>
 9         </div>
10         <div class="eye righteye">
11             <div class="ball"></div>            
12         </div>
13     </div>
14     <div class="text">
15         <p>L O A D I N G . . .</p>
16     </div>
17 </div>

View Code

第二幅的css

 1 .loading-wrap {
 2   position: absolute;
 3   left: 0px;
 4   right: 0px;
 5   top: 0px;
 6   bottom: 0px;
 7   z-index: 999;
 8   background-color: rgba(0, 0, 0, 0.3);
 9   box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
10   display: flex;
11   justify-content: center;
12   align-items: center;
13   flex-direction: column;
14   overflow: hidden;
15 }
16 .loading-wrap .loading {
17   width: 100px;
18   height: 100px;
19   border-radius: 100px;
20   background-color: transparent;
21   border: 1px solid #fff;
22   position: relative;
23   animation: spin 1s ease infinite;
24   animation-play-state: running;
25 }
26 .loading-wrap .loading .ball {
27   width: 20px;
28   height: 20px;
29   position: absolute;
30   border-radius: 10px;
31 }
32 .loading-wrap .loading .ball1 {
33   bottom: 0px;
34   left: 50%;
35   margin-left: -10px;
36   background-color: #FF6552;
37 }
38 @keyframes spin {
39   0% {
40     transform: rotate(0turn);
41   }
42   50% {
43     transform: rotate(0.5turn);
44     animation-timing-function: ease-in;
45   }
46   100% {
47     transform: rotate(1turn);
48   }
49 }
50 .loading-wrap .text {
51   margin-top: 60px;
52   color: #fff;
53   width: 120px;
54 }
55 .loading-wrap .text p {
56   white-space: nowrap;
57   overflow: hidden;
58   font-size: 13px;
59   width: 0px;
60   animation: textspin 3s ease-in-out infinite;
61   opacity: 0.7;
62   filter: alpha(opacity=70);
63 }
64 @keyframes textspin {
65   0% {
66     width: 0px;
67     opacity: 0.7;
68     filter: alpha(opacity=70);
69   }
70   50% {
71     width: 120px;
72     opacity: 0.7;
73     filter: alpha(opacity=70);
74   }
75   90% {
76     opacity: 0;
77     filter: alpha(opacity=0);
78     width: 120px;
79   }
80   100% {
81     opacity: 0;
82     filter: alpha(opacity=0);
83     width: 120px;
84   }
85 }

View Code

第二幅的dom

 1 <div class="loading-wrap"><!--   
 2 @require "app/component/loading/loading.less" 
 3   -->
 4     <div class="loading">
 5         <div class="ball ball1"></div>
 6     </div>
 7     <div class="text">
 8         <p>L O A D I N G . . .</p>
 9     </div>
10 </div>

View Code

以上。