loading状态

title: loading状态 id: c6229280cab57154b6feb334386f3ec4 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

loading状态

查看Demo

loading状态，需要js参与，这个只是抛砖引玉用的砖头，提供了个大体架子，细节的样式调整和动画，可以自己再定制。

css代码

/*定义动画*/
@-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/
  from {-webkit-transform: translate(-50%, -50%) rotate(0deg);}
  to {-webkit-transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0deg);}
  to {transform: translate(-50%, -50%) rotate(360deg);}
}
/* 改为,relative, 需要先判断是有定位,没有的话,需要这个类名,否则不用加 */
.toRelative {
  position: relative;
}
/* 遮罩 */
.onLoading::before {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(0,0,0,.4);
}
/* loading */
.onLoading::after {
  position: absolute;
  display: block;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #fff;
  border-left: 2px solid transparent;
  border-radius: 50%;
  -webkit-animation: spin 1.3s linear infinite;/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/
  animation: spin 1.3s linear infinite; 
}
.loadingBox {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  border-radius: 10px;
  text-align: center;
  padding-top: 25px;
  overflow: hidden;
}

<div class="loadingBox">
  点我切换loading状态
</div>

document.querySelector('.loadingBox').onclick = function() {
  let el = this
  if (el.classList.contains('onLoading')) { // 已经存在类名,已经是loading状态,取消loading
    el.classList.remove('onLoading', 'toRelative')
  }
  else { // 非loading状态,加入loading
    if (document.defaultView.getComputedStyle(el, null).position === 'static') el.classList.add('toRelative') // 是静态,加入relative定位
    el.classList.add('onLoading')
  }
}