在React中如何添加网站加载进度

react怎么加网站加载进度

在React中,你可以使用第三方库来实现网站加载进度。其中一个常用的库是react-top-loading-bar

首先,安装该库:

npm install react-top-loading-bar

然后,在你的组件中引入并使用它:

import React, { useState, useEffect } from 'react';
import LoadingBar from 'react-top-loading-bar';

const MyComponent = () => {
  const [loadingProgress, setLoadingProgress] = useState(0);

  useEffect(() => {
    // 模拟加载进度
    const timer = setInterval(() => {
      setLoadingProgress((prevProgress) => prevProgress + 10);
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <LoadingBar progress={loadingProgress} height={3} color='#f11946' />
      {/* 页面内容 */}
    </div>
  );
};

export default MyComponent;

上述代码中,我们创建了一个MyComponent组件,并在组件中使用了LoadingBar组件来展示加载进度条。通过useStateuseEffect钩子,我们模拟加载进度的增加。progress属性接收一个介于0到100之间的数字,表示加载百分比。height属性用于设置进度条的高度,color属性用于设置进度条的颜色。

这只是一个简单的示例,你可以根据自己的需求进行进一步的定制和样式修改。

这个不是我需要的,我需要的是在public/index.html 入口加入,当整个react代码加载好进度隐藏

如果你希望在整个React应用加载完毕后隐藏加载进度,可以通过在public/index.html文件中添加相关代码来实现。

首先,在public/index.html文件中找到加载进度的元素,通常为一个具有特定id的元素。例如,如果使用了react-top-loading-bar库,则可能类似于以下代码:

<div id="loading-bar"></div>

然后,你可以使用JavaScript来监听React应用的加载事件并在加载完成后隐藏进度条。

修改public/index.html文件如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ...其他头部内容 -->
  </head>
  <body>
    <div id="root"></div>
    <div id="loading-bar"></div> <!-- 加载进度条元素 -->

    <!-- ...其他脚本和样式资源 -->
    <script>
      // 监听React应用加载完成事件
      window.addEventListener('load', function () {
        var loadingBar = document.getElementById('loading-bar');
        if (loadingBar) {
          loadingBar.style.display = 'none'; // 隐藏进度条
        }
      });
    </script>
  </body>
</html>

上述代码中,我们在<script>标签中添加了一个监听器,它会在页面加载完成后执行。在监听器中,我们获取到加载进度条的元素,并将其样式的display属性设置为none,从而隐藏进度条。

记得保存并重新构建你的React应用后,加载进度条应该会在整个React应用加载完成后自动隐藏。

若要在加载进度条中添加一个自动旋转的图标,你可以使用CSS动画来实现。首先,确保将loading.png图片放置在public文件夹中。

public/index.html文件中,你可以修改加载进度条的元素如下:

<div id="loading-bar">
  <img src="loading.png" class="loading-icon" alt="Loading"/>
  website
</div>

然后,在CSS文件中添加以下样式规则,创建一个旋转动画效果:

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-icon {
  animation: rotate 1s infinite linear;
}

这段CSS代码定义了一个名为rotate的关键帧动画,从0%到100%的过程中,通过transform: rotate()将图标旋转360度,使其呈现旋转效果。

最后,在React应用中引入你的CSS文件,并确保它会应用到加载进度条元素上。

这样,当你的React应用加载时,loading.png图标就会自动旋转了。记得替换loading.png为你实际使用的图标名称。

<style media="screen" type="text/css">
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #screen-loading {
      width: 100vw;
      height: 100vh;
      background: #0D0D0D;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: fixed;
      z-index: 99999;
      top: 0;
      left: 0;
      opacity: 1;
      transition: all 0.3s;

      .loading-icon {
        animation: rotate 2s infinite linear;
        vertical-align: middle;
      }
      
      .loading-text {
        color: #fff;
        font-size: 32px;
        font-weight: bold;
      }
  }

</style>

根据你提供的代码,问题可能出在CSS选择器的嵌套上。在你的代码中,你使用了SCSS或类似于SCSS的语法,但是在HTML中直接嵌入CSS时无法正确解析这些嵌套。

要解决这个问题,你可以将CSS选择器展平,确保嵌套的选择器被正确应用。以下是修改后的代码:

<style media="screen" type="text/css">
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #screen-loading {
    width: 100vw;
    height: 100vh;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.3s;
  }

  #screen-loading .loading-icon {
    animation: rotate 2s infinite linear;
    vertical-align: middle;
  }
  
  #screen-loading .loading-text {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
  }
</style>

<div id="root"></div>
<div id="screen-loading">
    <img src="logo.png" class="loading-icon" alt="Loading AIPARTNERUP Chat"/>
    <span class="loading-text">AIPARTNERUP</span>
</div>

通过将CSS选择器展平,确保嵌套的选择器与对应的HTML元素匹配,你应该能够正确地实现logo.png图标的旋转效果,并保持"AIPARTNERUP"字体大小一致。

改成这样还是一样刚开始文字粗大点

非常抱歉,我之前理解错了你的问题。要使"AIPARTNERUP"的字体大小保持一致,你可以通过添加animation-fill-mode: forwards;属性来实现。

请将代码修改为以下形式:

<style media="screen" type="text/css">
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #screen-loading {
    width: 100vw;
    height: 100vh;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.3s;
  }

  #screen-loading .loading-icon {
    animation: rotate 2s infinite linear;
    vertical-align: middle;
  }
  
  #screen-loading .loading-text {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    animation-fill-mode: forwards; /* 添加这行 */
  }
</style>

<div id="root"></div>
<div id="screen-loading">
    <img src="logo.png" class="loading-icon" alt="Loading AIPARTNERUP Chat"/>
    <span class="loading-text">AIPARTNERUP</span>
</div>

通过添加animation-fill-mode: forwards;属性,动画结束后将应用最后一帧的样式,从而保持字体大小不变。

重新加载页面后,"AIPARTNERUP"的字体大小应该保持一致。

还是一样文字大小变了

非常抱歉之前给出的解决方案没有起到预期的作用。为了确保字体大小在动画过程中保持一致,你可以尝试使用另一种方法。

请将代码修改为以下形式:

<style media="screen" type="text/css">
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #screen-loading {
    width: 100vw;
    height: 100vh;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.3s;
  }

  #screen-loading .loading-icon {
    animation: rotate 2s infinite linear;
    vertical-align: middle;
  }
  
  #screen-loading .loading-text {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    transform-style: preserve-3d; /* 添加这行 */
  }
</style>

<div id="root"></div>
<div id="screen-loading">
    <img src="logo.png" class="loading-icon" alt="Loading AIPARTNERUP Chat"/>
    <span class="loading-text">AIPARTNERUP</span>
</div>

通过添加transform-style: preserve-3d;属性,可以在动画过程中保持字体大小不变。

重新加载页面后,"AIPARTNERUP"的字体大小应该保持一致。如果仍然存在问题,请确保代码中没有其他可能会影响字体大小的样式规则。

我把动画删除了也是这样#screen-loading .loading-icon { /* animation: rotate 2s infinite linear; */ vertical-align: middle; } 是不是画布被 screen-loading 调整了

是的,根据你提供的代码片段和问题描述,我可以确定画布被#screen-loading元素的样式调整了。这可能会导致画布中的内容发生变化,包括文字大小。

要解决这个问题,你可以尝试调整#screen-loading元素的样式,以确保画布不会受到影响。例如,你可以将position: fixed;改为position: absolute;,并将其放置在画布外部。

请尝试以下修改:

<style media="screen" type="text/css">
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #screen-loading {
    width: 100vw;
    height: 100vh;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute; /* 修改此行 */
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.3s;
  }

  #screen-loading .loading-icon {
    /* animation: rotate 2s infinite linear; */
    vertical-align: middle;
  }
  
  #screen-loading .loading-text {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
  }
</style>

<div id="root"></div>
<div id="screen-loading">
    <img src="logo.png" class="loading-icon" alt="Loading AIPARTNERUP Chat"/>
    <span class="loading-text">AIPARTNERUP</span>
</div>

通过将#screen-loadingposition属性设置为absolute,它将不再影响画布中其他元素的布局。

重新加载页面后,你应该能够看到"AIPARTNERUP"的字体大小保持一致,而不受#screen-loading的样式调整的影响。