0

Pace.js es una barra animada de JavaScript de carga de la página. Sitio oficial: https://github.com/HubSpot/pace

Mi código HTML:

<head>
<script src="//raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js"></script>
    <link href="resources/pace.css" rel="stylesheet">
</head>

Gracias.

3
  • 2
    Intenta mejor descargar los archivos y llamarlos de manera local.
    – M. Gress
    Commented el 19 abr. 2017 a las 15:20
  • No es muy clara la pregunta, ¿no funciona de que manera? ¿no te carga el script? ¿este no hace lo que debería hacer? específica más detalles para poder ayudarte mejor
    – Jorius
    Commented el 19 abr. 2017 a las 15:29
  • ¿Algún mensaje de error en la consola?
    – Muriano
    Commented el 28 abr. 2017 a las 6:44

1 respuesta 1

3

Problemas

  • No puedes usar //raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js para incluir el archivo JS, ya que los encabezados que devuelve esta URL son text/plain.

  • Opcional: No has descargado el CSS de alguno de los themes existentes.

Soluciones:

  • JS opciones:

    • Descargar el archivo pace.min.js desde la URL
    • Utilizar un CDN, por ejemplo, https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
  • CSS opciones:

    • Descarga el CSS de alguno de los themes y metelos en un archivo.
    • Utiliza un CDN, por ejemplo, https//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-flash.min.css

Demo:

$(function(){
  // Esperar 1 segundos y cargar ALGO infinitas veces
  function cargarAglo() {
    setTimeout(function() {
      $.ajax({
        url: '//www.planwallpaper.com/static/images/Nature-Beach-Scenery-Wallpaper-HD.jpg'
      }).always(cargarAglo);
    }, 1000);
  }
  
  cargarAglo();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-flash.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.