技術標籤：CSScsshtml

一、動畫樣式

#global_loading{

  background: linear-gradient(to right,rgb(73, 149, 221),#fff,rgb(173, 203, 231));
  height: 4px;
  position: fixed;
  z-index:999;
  width: 0;
  top: 0;
  left: 0;
  animation: grow 1.5s infinite forwards;//重複動畫
}
@keyframes grow{
  from{
    width: 0;
  }
  to
 
{

    width: 100%;
  }

}

二、在路由設定中實現

頁面載入錢建立div容器
載入完成後隱藏顯示display=none

router.beforeEach((to, from, next) => {
    //頁面載入前，顯示載入條
    let loadingBar = document.getElementById('global_loading')
    if (!loadingBar) {
        loadingBar = document.createElement('div')
        loadingBar.id = 'global_loading'
 

        document.body.append(loadingBar)
    } else {
        loadingBar.style.display = 'block'
    }
    //0.5秒後跳轉下一步
    setTimeout(() => {
        next()
    }, 500)

})
router.afterEach((to, from) => {
    //頁面載入完成，頂部載入條消失
    let loadingBar = document.getElementById('global_loading')
    if (loadingBar)
 
 {
        loadingBar.style.display = 'none'
    }

})

三、動畫效果