当你点击一个你喜欢和钦佩的网站上的链接时，没有什么比等待页面加载更令人沮丧的了。如果页面在加载的最初几秒钟内没有交互，用户可能会认为网站很慢。这是一个小插件，但它的目的是满足那些希望提高网站性能的修补者和其他感兴趣的人的需求。

Percent Preloader是一个简单、轻量级的jQuery插件，它以百分比显示当前页面的加载进度。它提供了一种用户友好的可视化页面预加载体验，直到折叠上方的所有资产都被完全加载，并且页面是可交互的。设计得足够小，在生产中不会对性能造成太大影响（只会为您的网站增加约1kb）。

如何使用它:

1.在页面上包含jQuery Percent Preloader插件的JavaScript和CSS文件。

<link rel="stylesheet" href="/path/to/percent-preloader.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/percent-preloader.min.js"></script>

2.为页面预加载程序创建HTML。就是这样。

<div class="preloader">
  <div class="inner">
    <span class="percentage"><span id="percentage">15</span>%</span>
  </div>
  <div class="loader-progress" id="loader-progress"> </div>
</div>

预览截图

jQuery中 可视化页面预加载程序 预加载百分比