如何在react上改变路由时实现这种加载器

Question

在此处输入图片说明

美好的一天，请在我改变反应路线时尝试实现这种加载和微调器，这里的任何人都可以帮我解决代码。 我使用react-router-dom 。 谢谢

Answer 1

按媒体使用本教程，它显示了一个有用的示例。

Answer 2

将此添加到 Header 或 index.html 或 index.js（父组件）

<progress value="20" max='100'></progress>

将 jquery 添加到该 html 页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然后在这个脚本标签下面添加这个

    <script>
      $(window).scroll(function(){
    $('progress').val(($(window)[0].scrollY+$(window)[0].innerHeight)*100/$(document).height())
        })
    </script>

请注意，您可以通过 css 设置进度条的样式

progress{
 ...//css
}