Como adicionar uma barra de loading igual a do YouTube com JavaScript

É muito simples adicionar uma barra de loading igual a do YouTube, basta utilizar o plugin pace.js criado pela HubSpot.

Confira na aula gratuita do curso de UX Design: https://www.origamid.com/aula/2-8-pratica-loading-de-pagina/

Acesse o repositório do plugin no GitHub em https://github.com/HubSpot/pace/

Você precisa apenas baixar o arquivo pace.min.js e escolher o tema do loading dentro da pasta themes no repositório.

Adicione o arquivo pace.min.js ao seu projeto com:

<script src="js/pace.min.js"\></script>

E adicione o CSS do tema. Exemplo de CSS do tema mínimo (igual ao do youtube):

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #8844ee;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

Você pode alterar o background para a cor que preferir, assim como o height da barra de loading também.