首页 > 代码库 > css3,环绕圆环 loading,小组件

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

 

 

以上。

css3,环绕圆环 loading,小组件