如何在更改路由时实现这种加载器

Question

enter image description here

美好的一天的人，请在改变路线时尝试实施这种装载和微调器，这里的任何人都可以帮我解决这些问题。我用react-router-dom。谢谢

Answer 1

通过媒体使用this教程，它显示了一个有用的例子。

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
}