网站加载中loading..样式四代码介绍

css代码：

body {
  background:#1b1d1f;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:0;
  margin:0
}
.loader {
  width:250px;
  height:50px;
  line-height:50px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:helvetica,arial,sans-serif;
  text-transform:uppercase;
  font-weight:900;
  color:#f1404b;
  letter-spacing:0.2em
}
.loader::before,.loader::after {
  content:"";
  display:block;
  width:15px;
  height:15px;
  background:#f1404b;
  position:absolute;
  animation:load .7s infinite alternate ease-in-out
}
.loader::before {
  top:0
}
.loader::after {
  bottom:0
}
@keyframes load {
  0% {
  left:0;
  height:30px;
  width:15px
}
50% {
  height:8px;
  width:40px
}
100% {
  left:235px;
  height:30px;
  width:15px
}
}

html代码：

<div id="loading">
  <div class="loader">Loading...</div>
</div> 

点击查看效果

以上是编程学习网小编为您介绍的“网站加载中loading..样式四代码介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。