Hexo博客NexT主题美化之顶部加载进度条

前言

更多效果展示，请访问我的 个人博客。

效果图：

教程

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

cd /themes/next复制代码

下载安装Progress module，如下

git clone /theme-next/theme-next-pace source/lib/pace复制代码

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

# Progress bar in the top during page loading.# Dependencies: /theme-next/theme-next-pacepace: 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 examplepace_theme: pace-theme-center-atom #选择进度条样式复制代码

不同的样式效果图：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动图，如果您觉得这对您有帮助，请随意打赏或评论点赞，谢谢大家。