Pace.js does not work [closed]

Navigation
0

Pace.js is an animated JavaScript bar loading the page. Official site: link

My HTML code: 

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

Thank you.

    
asked by José Hernandez 19.04.2017 в 17:18
source

1 answer

3

Problems

  • You can not use //raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js to include the file JS , since the headers returned by this URL are text/plain .

  • Optional : You have not downloaded the CSS of any of the themes existing.

Solutions:

  • JS options:

    • Download the file pace.min.js from URL
    • Use a CDN , for example, https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js

  • CSS options:

    • Download the CSS of one of the themes and put them into a file.
    • Use a CDN , for example, 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>
    
answered by 19.04.2017 в 18:17
Print HTML content from PHP to Javascript variable Cycle for javascript