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

前言

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

效果图：

教程

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

cd /themes/next
复制代码

下载安装Progress module，如下

git clone https://github.com/theme-next/theme-next-pace source/lib/pace
复制代码

在/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 #选择进度条样式
复制代码

不同的样式效果图：

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

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

Hexo博客NexT主题美化之新增看板娘(能说话、能换装)
前言更多效果展示,请访问我的个人博客. 效果图: 教程: 小白水平: hexo的官方是支持看板娘的,已经封装好了插件,但只是模型,不能说话.不能换装.功能较少. 安装模块,如下: npm inst ...
Hexo博客之主题美化
据说 NexT 是使用最多的Hexo主题,原因当然是比较漂亮啦!这个项目托管于github上,你可以fork一下,贡献代码.NexT官网上面给出了详细的主题配置过程,这里只是我的博客使用的一些配置以及 ...
Hexo博客NexT主题美化之评论系统
前言更多效果展示,请访问我的个人博客. 效果图: Valine 诞生于2017年8月7日,是一款基于Leancloud的快速.简洁且高效的无后端评论系统. 教程: 登录 Leancloud 官网, ...
Hexo博客NexT主题美化之文末统一添加“本文结束”标记
前言更多效果展示,请访问我的个人博客. 效果图: 教程: 在目录 themes/next/layout/_macro/ 下添加 passage-end-tag.swig ,内容如下: <di ...
hexo博客butterfly主题美化
博客代码展示代码高亮样式 Butterfly 支持6种代码高亮样式: default darker pale night light ocean mac 只需要配置主题配置文件(配置butterfl ...
Hexo博客NexT主题美化之网站标题栏背景变色
前言更多效果展示,请访问我的个人博客. 效果图: 教程打开themes/next/source/css/_custom/custom.styl,在里面新增如下代码: .site-meta {ba ...
nprogress 插件网页顶部加载进度条
文章目录效果(看顶部) 安装使用 1.基本用法 2.高级用法效果(看顶部) 安装 CSDN地址(我设置的免积分,推荐下载):https://download.csdn.net/download/ ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...

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

前言

效果图：

教程

后记：

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

最新文章

热门文章