实现动态效果loading加载中_loding加载中样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46371234/article/details/135746965

在入口文件index.html中进行样式更改
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon_kc.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>合肥市科创金融服务平台</title>
    <style>
      .windowLoading{margin:0;width:100%;height:100vh;overflow:hidden}
      .windowLoading{display:flex;flex-direction:column;justify-content:center;align-items:center}
      .windowLoading .loadingText{font-family:'Helvetica','Arial',sans-serif;font-size:16px;font-weight:700;text-align:center;margin:10px 0;}
      .windowLoading .logo{position:relative;width:100px;height:100px;box-sizing:border-box;background-color:white}
      .windowLoading .logo::before,.logo::after{content:'';position:absolute;width:100%;height:100%;box-sizing:border-box;border:4px solid transparent;animation-timing-function:linear}
      .windowLoading .logo::before{top:0;left:0;border-top-color:black;border-right-color:black;animation:windowLoading-border-before 1.5s infinite;animation-direction:alternate}
      .windowLoading .logo::after{bottom:0;right:0;border-bottom-color:black;border-left-color:black;animation:windowLoading-border-after 1.5s infinite;animation-direction:alternate}
      .windowLoading .logo>div{position:absolute}
      .windowLoading .logo .red{top:4px;bottom:0;left:0;border-right:4px solid black;background-color:#ea5664;animation:windowLoading-red 1.5s infinite;animation-direction:alternate}
      .windowLoading .logo .orange{bottom:0;left:27%;right:4px;border-top:4px solid black;background-color:#f3b93f;animation:orange 1.5s infinite;animation-direction:alternate}
      .windowLoading .logo .white{right:5px;top:4px;bottom:50%;height:50%;border-left:4px solid black;background-color:#fff;animation:windowLoading-white 1.5s infinite;animation-direction:alternate}
      @keyframes windowLoading-border-before{0%{width:0;height:0;border-right-color:transparent}5.99%{border-right-color:transparent}6%{height:0;width:100%;border-right-color:black}25%,100%{width:100%;height:100%}}
      @keyframes windowLoading-border-after{0%,24.99%{width:0;height:0;border-left-color:transparent;border-bottom-color:transparent}25%{border-left-color:transparent;border-bottom-color:black}36.99%{border-left-color:transparent}37%{height:0;width:100%;border-left-color:black}50%,100%{width:100%;height:100%}}
      @keyframes windowLoading-red{0%,50%{width:0;opacity:0}50.01%{opacity:1}65%,100%{width:27%;opacity:1}}@keyframes orange{0%,65%{height:0;opacity:0}65.01%{opacity:1}80%,100%{height:50%;opacity:1}}
      @keyframes windowLoading-white{0%,75%{width:0;opacity:0}75.01%{opacity:1}90%,100%{width:27%;opacity:1}}
    </style>
  </head>
  <body>
    <div id="app">
      <div class="windowLoading">
        <div class="logo">
          <div class="white"></div>
          <div class="orange"></div>
          <div class="red"></div>
        </div>
        <div class="loadingText">Loading ...</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>