loader加载动画

下载代码

html

css

分享到微信朋友圈

html

css

#loader {
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  color: rgba(0, 0, 0, 0.8);
  background-color: #EEE;
  width: 100px;
  height: 100px;
  padding: 50px;
  user-select: none;
  cursor: default;
  transition: opacity 800ms;
}

.dotring {
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50px;
  left: 50px;
  border-radius: 100%;
  border: 2px dashed;
  border-top: 2px solid transparent;
  border-left: 2px solid;
  animation: rotato 12000ms linear infinite;
}

.spheric {
  display: block;
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 20px;
  border: 1px solid;
  border-radius: 100%;
  left: 3.5px;
  top: 3.5px;
  background-color: #eee;
  box-shadow: inset 3px -3px 6px 4px rgba(0, 0, 0, 0.8);
  animation: rotato 12000ms linear infinite reverse;
}

.pipline {
  display: block;
  position: absolute;
  z-index: 2;
  width: 90px;
  height: 90px;
  top: -5px;
  left: -5px;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top: 10px solid #111;
  animation: rotato 4800ms linear infinite;
  overflow: visible;
}
.pipline:before {
  display: block;
  position: absolute;
  content: '';
  width: 9px;
  height: 7px;
  border-radius: 100%;
  top: 5.5px;
  right: 5px;
  background-color: #888;
  transform: rotate(-45deg);
}
.pipline:after {
  display: block;
  position: absolute;
  content: '';
  width: 9px;
  height: 7px;
  border-radius: 100%;
  top: 5.5px;
  left: 5px;
  background-color: #111;
  transform: rotate(45deg);
}

.loadbar {
  display: block;
  position: absolute;
  height: 40px;
  width: 200px;
  top: 200px;
  left: 0;
  background-color: #fff;
}
.loadbar:after {
  display: block;
  content: '';
  z-index: -1;
  position: absolute;
  top: -100px;
  left: -75px;
  height: 118px;
  width: 118px;
  border-radius: 100% 0 0 100%;
  border: 2px dashed;
  border-right: 2px transparent;
}

.loadpac {
  display: inline-block;
  width: 12px;
  height: 25px;
  margin-top: 7px;
  margin-left: -2px;
  background: #777;
  background-image: url(http://www.transparenttextures.com/patterns/clean-gray-paper.png);
  transform: skew(0, 20deg);
}
.loadpac:first-child {
  margin-left: 10px;
}
.loadpac:after {
  display: block;
  content: '';
  height: 25px;
  width: 4px;
  margin-top: -26px;
  margin-left: -4px;
  background: #222;
  transform: skew(0, -20deg);
}
.loadpac:before {
  display: block;
  content: '';
  width: 12px;
  height: 2px;
  margin-top: 25px;
  margin-left: -2px;
  background: #CCC;
  transform: skew(-70deg);
}

.numbers {
  display: block;
  position: absolute;
  font-size: 40px;
  text-align: center;
  width: 100px;
  margin-top: 29px;
  font-family: droid sans mono, mono, sans;
}

@keyframes rotato {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

var loadSpace = document.getElementById('loader');
var mainLoop = document.createElement('div');
var shadeDot = document.createElement('div');
var arcaPipe = document.createElement('div');
var loadBars = document.createElement('div');
var loadNumb = document.createElement('div');

mainLoop.className = "dotring";
shadeDot.className = "spheric";
arcaPipe.className = "pipline";
loadBars.className = "loadbar";
loadNumb.className = "numbers";

function setPack(num) {
  loadBars.innerHTML = '';
  for (i = 0; i < num; i++) {
    var loadPack = document.createElement('div');
    loadPack.className = "loadpac";
    loadPack.style.zIndex = 100 - i;
    loadPack.style.backgroundPosition = "0 " + (i * 30) + "px";
    loadBars.appendChild(loadPack);
  }
}

mainLoop.appendChild(shadeDot);
mainLoop.appendChild(arcaPipe);
loadSpace.appendChild(mainLoop);
loadSpace.appendChild(loadBars);

var prog = 0;

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg