加载动画

最新推荐文章于 2024-08-20 02:18:10 发布

飞翔代码的code

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量358

点赞数

分类专栏： vue 文章标签： vue组件加载动画

本文链接：https://blog.csdn.net/qq_38367710/article/details/86133948

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<style>
  .firstChangeLoading ul {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      z-index: 999999999999999;
      border-radius: 0;
    }

    .firstChangeLoading ul li {
      height: 20px;
      width: 20px;
      list-style: none;
      border-radius: 50%;
      background-color: red;
      margin-left: 15px;
      animation: 1.3s loading infinite alternate;
    }

    .firstChangeLoading ul li:first-child {
      margin-left: 0;
      background-color: #ff6666;
    }

    .firstChangeLoading ul li:nth-child(2) {
      background-color: #9933ff;
      animation-delay: .2s;
    }

    .firstChangeLoading ul li:nth-child(3) {
      background-color: #00ccff;
      animation-delay: .4s;
    }
   @keyframes loading {
      from {
        transform: scale(1.2)
      }

      to {
        transform: scale(.4)
      }
    }
</style>

<div id="firstChangeLoading" class="firstChangeLoading">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>





路由配置：
 {
    path: '/profile_binding_phone',
    name: 'ProfileBindingPhone',
    component: importLoading(() => import("../page/profile/settings/page/bindingphone.vue")),
    meta: { title: "绑定手机" }
  }

const importLoading = (importComponent, loadStart, loadSuccess, loadError) => {
    return () => {
        let com = importComponent()
        document.querySelector('#firstChangeLoading').style.display = 'flex';
        loadStart && loadStart()
        com.then(() => {
            loadSuccess && loadSuccess()
            document.querySelector('#firstChangeLoading').style.display = 'none';
        })
            .catch(err => {
                loadError && loadError(err)
            })
        return com
    }
}
export default importLoading