效果图：

---

教程：

1. 进入博客文件夹的/themes/next文件夹下

   cd /themes/next

2. 下载安装Progress module，如下

   git clone https://github.com/theme-next/theme-next-pace source/lib/pace

3. 在/themes/next/_config.yml中设置，如下

   # Progress bar in the top during page loading.
   # Dependencies: https://github.com/theme-next/theme-next-pace
   pace: true #是否开启进度条
   # Themes list:
   # pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
   # pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
   # pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
   # For example
   pace_theme: pace-theme-center-atom #选择进度条样式

4. 不同的样式效果图：

• pace-theme-big-counter
  

---

• pace-theme-bounce
  

---

• pace-theme-barber-shop
  

---

• pace-theme-center-atom
  

---

• pace-theme-center-circle
  

---

• pace-theme-center-radar
  

---

• pace-theme-center-simple
  

---

• pace-theme-corner-indicator
  

---

• pace-theme-fill-left
  

---

• pace-theme-flash
  

---

• pace-theme-loading-bar
  

---

• pace-theme-mac-osx
  

---

• pace-theme-minimal
  

---

后记：

• 我的网络时好时坏的，所以进度条也是录的时快时慢，请大家见谅。
• 想知道怎么在Mac下高效的制作gif动图的小伙伴请移步至 Mac屏幕录制GIF动图
• 为了让大家可以直观的查看进度条的效果，因此我录制了gif动图，如果您觉得这对您有帮助，请随意打赏或评论点赞，谢谢大家。

---