1

I am using pace.js plugin, it works fine but I want that the progress bar will show for longer time, mean to increase the loading time, so user will see the loading screen for long time, by default it run fast. I will also look at these options but can't understand where to add the code for increasing the loading time.

I try this code,

window.paceOptions={
    initialRate:0.7,
    minTime:1750,
    maxProgressPerFrame:1,
    ghostTime: 120000
}

but it will not working.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171

1 Answers1

5

You can describe options or in data-pace-options attribute for script tag with pace.js

Or better - in simple tag script ( plain js ) BEFORE including pace.js ( to set value before library start ) like this:

<!DOCTYPE html>
<html>
<head>
  <script>
    paceOptions = {
    initialRate:0.7,
    minTime:1750,
    maxProgressPerFrame:1,
    ghostTime: 120000
}
  </script>
<script src="https://rawgit.com/HubSpot/pace/master/pace.js"></script>
   <link href="https://rawgit.com/HubSpot/pace/master/themes/green/pace-theme-barber-shop.css" rel="stylesheet" />
  <meta charset="utf-8">
  <title>Pace</title>
</head>
<body>

</body>
</html>

Try in here: http://jsbin.com/pumarikixa/1/

To change speed see eventLag options -

  eventLag : {
    minSamples: 10,
    sampleCount: 300,
    lagThreshold: 1
  }

Something like http://jsbin.com/pequdepaga/1/

Vasiliy vvscode Vanchuk
  • 7,007
  • 2
  • 21
  • 44
  • Dear Sir thanks for the replay, but i am still facing some issues. 1) when the progress bar reaches to 99% then it will stop for long time, why? 2) i want to show some contents when progress bar reaches to 40%, some on 70% and complete on 100%, is it possible? –  Feb 19 '15 at 05:02
  • Nope - pace.js has api for monitoring process progress, but it doesn't trigger event on progress - you can get start/ stop etc - so you should track progress on other object – Vasiliy vvscode Vanchuk Feb 19 '15 at 05:12
  • Why do you use this lib? I you just need to generate progress bar - it can be made simple with jquery / pure js – Vasiliy vvscode Vanchuk Feb 19 '15 at 05:13