react-app中引入loading加载动画，刷新页面出现动画

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1. 在 public/css 文件里 新建 loading.min.css  文件 写入如下代码：

#i-loading{background:#fff;left:0;top:0;right:0;bottom:0;position:fixed;z-index:9999;transition:all .5s ease-out}.i-loading-out{opacity:0;}#i-loading .loading-center{position:absolute;left:50%;top:50%;height:150px;width:150px;margin-top:-75px;margin-left:-75px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}#i-loading i{width:20px;height:20px;background-color:#2593fb;position:absolute;left:65px;top:65px}#i-loading i:nth-child(2n+0){margin-right:0}#i-loading i:nth-child(1){-webkit-animation:item_one 2s infinite;animation:item_one 2s infinite;-webkit-animation-delay:.2s;animation-delay:.2s}#i-loading i:nth-child(2){-webkit-animation:item_two 2s infinite;animation:item_two 2s infinite;-webkit-animation-delay:.3s;animation-delay:.3s}#i-loading i:nth-child(3){-webkit-animation:item_three 2s infinite;animation:item_three 2s infinite;-webkit-animation-delay:.4s;animation-delay:.4s}#i-loading i:nth-child(4){-webkit-animation:item_four 2s infinite;animation:item_four 2s infinite;-webkit-animation-delay:.5s;animation-delay:.5s}#i-loading i:nth-child(5){-webkit-animation:item_five 2s infinite;animation:item_five 2s infinite;-webkit-animation-delay:.6s;animation-delay:.6s}#i-loading i:nth-child(6){-webkit-animation:item_six 2s infinite;animation:item_six 2s infinite;-webkit-animation-delay:.7s;animation-delay:.7s}#i-loading i:nth-child(7){-webkit-animation:item_seven 2s infinite;animation:item_seven 2s infinite;-webkit-animation-delay:.8s;animation-delay:.8s}#i-loading i:nth-child(8){-webkit-animation:item_eight 2s infinite;animation:item_eight 2s infinite;-webkit-animation-delay:.9s;animation-delay:.9s}#i-loading i:nth-child(9){position:absolute;width:50px;height:50px;left:50px;top:50px;-webkit-animation:item_big 2s infinite;animation:item_big 2s infinite;-webkit-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes item_big{50%{-webkit-transform:scale(0.5)}}@keyframes item_big{50%{transform:scale(0.5);-webkit-transform:scale(0.5)}}@-webkit-keyframes item_one{50%{-webkit-transform:translate(-65px,-65px)}}@keyframes item_one{50%{transform:translate(-65px,-65px);-webkit-transform:translate(-65px,-65px)}}@-webkit-keyframes item_two{50%{-webkit-transform:translate(0,-65px)}}@keyframes item_two{50%{transform:translate(0,-65px);-webkit-transform:translate(0,-65px)}}@-webkit-keyframes item_three{50%{-webkit-transform:translate(65px,-65px)}}@keyframes item_three{50%{transform:translate(65px,-65px);-webkit-transform:translate(65px,-65px)}}@-webkit-keyframes item_four{50%{-webkit-transform:translate(65px,0)}}@keyframes item_four{50%{transform:translate(65px,0);-webkit-transform:translate(65px,0)}}@-webkit-keyframes item_five{50%{-webkit-transform:translate(65px,65px)}}@keyframes item_five{50%{transform:translate(65px,65px);-webkit-transform:translate(65px,65px)}}@-webkit-keyframes item_six{50%{-webkit-transform:translate(0,65px)}}@keyframes item_six{50%{transform:translate(0,65px);-webkit-transform:translate(0,65px)}}@-webkit-keyframes item_seven{50%{-webkit-transform:translate(-65px,65px)}}@keyframes item_seven{50%{transform:translate(-65px,65px);-webkit-transform:translate(-65px,65px)}}@-webkit-keyframes item_eight{50%{-webkit-transform:translate(-65px,0)}@keyframes item_eight{50%{transform:translate(-65px,0);-webkit-transform:translate(-65px,0)}}

2 .在 public/index.html 文件里 引用 loading加载动画

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>xxxx后台管理系统</title>
     <!-- loading 动画 -->
    <link rel="stylesheet" href="/css/loading.min.css" />
  </head>
  <body>
    <!-- loading 动画 -->
    <div id="i-loading">
      <div class="loading-center">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

3 .在 src/pages/App.js  文件里 写入 loading 动画 的结束 控制 模块

 方便你复制~~~~

  componentWillMount () {
    // loading 动画 的结束 控制 模块
    let loading = document.getElementById('i-loading')
    if (loading) {
      loading.setAttribute('class', 'i-loading-out')
      setTimeout(() => {
        loading.style.display = 'none'
      }, 1000)
    }
  }

以上是 react-app中引入loading加载动画，刷新页面出现动画 的全部内容， 来源链接： utcz.com/z/383450.html

回到顶部