Как реализовать этот вид загрузчика при смене маршрутов на реакции?

Question

введите описание изображения здесь

Добрый день, люди, пожалуйста, я пытаюсь реализовать этот вид загрузки и вращения, когда я изменяю маршруты в реакции, может кто-нибудь здесь помочь мне с кодом,Я использую react-router-dom.Спасибо

Answer 1

добавить это в 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
}

Answer 2

Используйте этот учебник по среде, он показывает полезный пример.