HTML CSS文件加载动画

下载代码

html

css

分享到微信朋友圈

html

css

.overlay{
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.7);
  height:100%;
  width:100%;
}
.wrap:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.wrap{
  position:relative;
  text-align:center;
  color:white;
  font-family:Arial;
  height:100%;
}
.center{
  display:inline-block;
  vertical-align:middle;
}
.document-loader{
  display:inline-block;
  min-width:100px;
  min-height:141px;
  position:relative;
  padding:5px;
  border-radius:4px;
  background: #f38730;
  animation:slideInOut 3s ease infinite;
}
.document-loader:before{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom-left-radius: 2px;
  border-width: 5px;
  border-style: solid;
  border-color: #4c4c4c #4c4c4c rgba(255,255,255,.35) rgba(255,255,255,.35);
  border-bottom-left-radius: 4px;
  border-width: 16px;
}
.document-loader .heading{
  display:block;
  height:8px;
  background:#333;
  width:0px;
  margin-bottom:5px;
  margin-top:5px;
  animation: growHeading 3s linear infinite;
}
.document-loader .heading.short{
  animation: growHeadingShort 3s linear infinite;
}
.document-loader .heading:first-child{
  margin-top:0px;
}
.document-loader .line{
  display:block;
  margin:3px 0 3px 0;
  background:#eee;
  height:4px;
  width:0px;
  animation: growLine 3s linear infinite;
}
.document-loader .line.short{
  margin-bottom:6px;
  animation: growLineShort 3s linear infinite;
}

@keyframes slideInOut{
  0%{
    transform:translateX(-100%);
    opacity:0;
  }
  20%{
    transform:translateX(-5%);
    opacity:1;
  }
  80%{
    transform:translateX(5%);
    opacity:1;
  }
  100%{
    transform:translateX(100%);
    opacity: 0;
  }
}

@keyframes growHeading{
  0%{
    width:0px;
  }
  60%{
    width:0;
  }
  70%{
    width:85px;
  }
  100%{
    width:90px;
  }
}

@keyframes growHeadingShort{
  0%{
    width:0px;
  }
  30%{
    width:0;
  }
  40%{
    width:45px;
  }
  100%{
    width:65px;
  }
}

@keyframes growLine{
  0%{
    width:0px;
  }
  60%{
    width:0px;
  }
  80%{
    width:85px;
  }
  100%{
    width:100px;
  }
}

@keyframes growLineShort{
  0%{
    width:0;
  }
  50%{
    width:0;
  }
  60%{
    width:70px;
  }
  100%{
    width:75px;
  }
}

JavaScript

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