进度条 Vue2 +PC端，点击页面加载时页面顶部的那个蓝条

小程的坏习惯

于 2023-07-30 18:10:53 发布

阅读量340

点赞数

文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_68903201/article/details/132009720

版权

文章展示了如何在Less中编写一个固定位置的全局加载指示器，通过CSS动画实现宽度从0到100%的渐变效果，创建一个红色背景的进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：

 <div class="global-loading"> </div>

css:less


<style lang="less">
.global-loading {
  background-color: red;
  height: 10px;
  position: fixed;
  z-index: 999;
  width: 0;
  animation: grow 2s infinite forwards;

}

@keyframes grow {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}
</style>