index.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset='utf-8'>
  5. <title>NProgress: slim progress bars in JavaScript</title>
  6. <link href='support/style.css' rel='stylesheet' />
  7. <link href='nprogress.css' rel='stylesheet' />
  8. <meta name="viewport" content="width=device-width">
  9. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic' rel='stylesheet' type='text/css'>
  10. <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  11. <script src='nprogress.js'></script>
  12. <script>if(location.hostname.match(/ricostacruz\.com$/)){var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-20473929-1"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()}</script>
  13. </head>
  14. <body style='display: none'>
  15. <header class='page-header'>
  16. <span class='nprogress-logo fade out'></span>
  17. <h1>NProgress<i>.js</i></h1>
  18. <p class='fade out brief big'>A nanoscopic progress bar. Featuring realistic
  19. trickle animations to convince your users that something is happening!</p>
  20. </header>
  21. <div class='contents fade out'>
  22. <div class='controls'>
  23. <p>
  24. <button class='button play' id='b-0'></button>
  25. <i>NProgress</i><b>.start()</b>
  26. &mdash;
  27. shows the progress bar
  28. </p>
  29. <p>
  30. <button class='button play' id='b-40'></button>
  31. <i>NProgress</i><b>.set(0.4)</b>
  32. &mdash;
  33. sets a percentage
  34. </p>
  35. <p>
  36. <button class='button play' id='b-inc'></button>
  37. <i>NProgress</i><b>.inc()</b>
  38. &mdash;
  39. increments by a little
  40. </p>
  41. <p>
  42. <button class='button play' id='b-100'></button>
  43. <i>NProgress</i><b>.done()</b>
  44. &mdash;
  45. completes the progress
  46. </p>
  47. </div>
  48. <div class='actions'>
  49. <a href='https://github.com/rstacruz/nprogress' class='button primary big'>
  50. Download
  51. v<span class='version'></span>
  52. </a>
  53. <p class='brief'>Perfect for Turbolinks, Pjax, and other Ajax-heavy apps.</p>
  54. </div>
  55. <div class='hr-rule'></div>
  56. <div class='share-buttons'>
  57. <iframe src="http://ghbtns.com/github-btn.html?user=rstacruz&repo=nprogress&type=watch&count=true"
  58. allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
  59. <iframe src="http://ghbtns.com/github-btn.html?user=rstacruz&type=follow&count=true"
  60. allowtransparency="true" frameborder="0" scrolling="0" width="175" height="20"></iframe>
  61. <a href="https://news.ycombinator.com/submit" class="hn-button" data-title="NProgress" data-url="http://ricostacruz.com/nprogress/" data-count="horizontal" data-style="twitter">HN</a>
  62. </div>
  63. </div>
  64. <script>
  65. $('body').show();
  66. $('.version').text(NProgress.version);
  67. NProgress.start();
  68. setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
  69. $("#b-0").click(function() { NProgress.start(); });
  70. $("#b-40").click(function() { NProgress.set(0.4); });
  71. $("#b-inc").click(function() { NProgress.inc(); });
  72. $("#b-100").click(function() { NProgress.done(); });
  73. </script>
  74. <script>var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>
  75. </body>
  76. </html>