浏览器顶部loading(来自知乎)

最新推荐文章于 2024-07-09 11:43:29 发布

徐同保

最新推荐文章于 2024-07-09 11:43:29 发布

阅读量860

点赞数 1

分类专栏： web前端文章标签：浏览器顶部loading(来自知乎)

本文链接：https://blog.csdn.net/xutongbao/article/details/86625580

版权

web前端专栏收录该内容

735 篇文章 16 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>浏览器顶部loading(来自知乎)</title>
  <style>
  .m-loading-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    display: none;
    height: 2px;
    pointer-events: none;
    background: #0084FF;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  .m-loading-bar.active {
    display: block;
    -webkit-animation: LoadingBarForward 1s ease-in-out 0.8s infinite;
    animation: LoadingBarForward 1s ease-in-out 0.8s infinite;
  }

  @-webkit-keyframes LoadingBarForward {
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }

    40% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    60% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  @keyframes LoadingBarForward {
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }

    40% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    60% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
  </style>
</head>

<body>
  <div class="m-loading-bar active"></div>
</body>

</html>