css3,环绕圆环 loading,小组件

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

type:cat

type:ball

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

老鼠的父div，一直在rotate。

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

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

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

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

第一幅的css

.loadingcat-wrap {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.loadingcat-wrap .loadingcat {
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJDRTM0ODM2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJDRTM0ODQ2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkNFMzQ4MTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkNFMzQ4MjZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjtjnUMAAAskSURBVHja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);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: catspin 3s linear infinite;
  animation-play-state: running;
}
@keyframes catspin {
  0% {
    transform: rotate(1turn);
  }
  100% {
    transform: rotate(0turn);
  }
}
.loadingcat-wrap .cat {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAYAAACSjFpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBEMEQwRkE2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBEMEQwRkI2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MEQwRDBGODZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MEQwRDBGOTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuDgtsEAAAwLSURBVHja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);
  width: 56px;
  height: 54px;
  position: relative;
  top: -100px;
}
.loadingcat-wrap .cat .eye {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  animation: scatpin 2s linear infinite;
  animation-play-state: running;
}
@keyframes scatpin {
  0% {
    transform: rotate(1turn);
  }
  100% {
    transform: rotate(0turn);
  }
}
.loadingcat-wrap .cat .lefteye {
  left: 5px;
  top: 15px;
}
.loadingcat-wrap .cat .righteye {
  left: 30px;
  top: 15px;
}
.loadingcat-wrap .cat .ball {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 5px;
  border-radius: 5px;
  background-color: #818492;
}
.loadingcat-wrap .text {
  color: #fff;
  width: 120px;
}
.loadingcat-wrap .text p {
  white-space: nowrap;
  overflow: hidden;
  width: 0px;
  animation: textspin 3s ease-in-out infinite;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
@keyframes textspin {
  0% {
    width: 0px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  50% {
    width: 120px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  90% {
    opacity: 0;
    filter: alpha(opacity=0);
    width: 120px;
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    width: 120px;
  }
}

第一幅的dom

<div class="loadingcat-wrap"><!--   
@require "app/component/loading/loadingcat.less" 
  -->
    <div class="loadingcat">
    </div>
    <div class="cat">
        <div class="eye lefteye">
            <div class="ball"></div>
        </div>
        <div class="eye righteye">
            <div class="ball"></div>            
        </div>
    </div>
    <div class="text">
        <p>L O A D I N G . . .</p>
    </div>
</div>

第二幅的css

.loading-wrap {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.loading-wrap .loading {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: transparent;
  border: 1px solid #fff;
  position: relative;
  animation: spin 1s ease infinite;
  animation-play-state: running;
}
.loading-wrap .loading .ball {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 10px;
}
.loading-wrap .loading .ball1 {
  bottom: 0px;
  left: 50%;
  margin-left: -10px;
  background-color: #FF6552;
}
@keyframes spin {
  0% {
    transform: rotate(0turn);
  }
  50% {
    transform: rotate(0.5turn);
    animation-timing-function: ease-in;
  }
  100% {
    transform: rotate(1turn);
  }
}
.loading-wrap .text {
  margin-top: 60px;
  color: #fff;
  width: 120px;
}
.loading-wrap .text p {
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  width: 0px;
  animation: textspin 3s ease-in-out infinite;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
@keyframes textspin {
  0% {
    width: 0px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  50% {
    width: 120px;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  90% {
    opacity: 0;
    filter: alpha(opacity=0);
    width: 120px;
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    width: 120px;
  }
}

第二幅的dom

<div class="loading-wrap"><!--   
@require "app/component/loading/loading.less" 
  -->
    <div class="loading">
        <div class="ball ball1"></div>
    </div>
    <div class="text">
        <p>L O A D I N G . . .</p>
    </div>
</div>

以上。