Discuz X5.0 帖子页用户等级进度条美化教程（渐变 + 动画 + 百分比）

建筑吧

效果预览：
- 蓝色渐变流动动画，与网站主色调统一
- 百分比数字叠加显示，低进度下也清晰可读
- 光泽扫过动画 + 页面加载时进度增长动画
- 鼠标悬停增亮发光
适用版本： Discuz X5.0（其他版本可参考）
修改模板： 以 jzbar_x5 模板为例，default/discuzx5 等模板同理

---

一、实现思路

Discuz 默认的用户等级进度条是纯色直角、无百分比、无动画，比较简陋。本教程通过两个文件的修改实现美化：

• 模板文件 ：给进度条添加自定义 class 和百分比文字元素
• CSS 文件 ：用渐变背景、动画、描边文字实现精致效果
  

重要踩坑提醒： CSS 一定要写在 extend_common.css 里， 不要 写在 extend_module.css 里！原因见文末第六节。

---

二、修改文件 1：模板文件（HTML 结构）

文件路径： template / 你的模板名 /forum/viewthread_profile_node.php

如果你的模板目录下没有这个文件，从 template/default/forum/ 复制一份过来。

找到 profile_node_upgradeprogress 函数中的输出代码（约第 75 行）：原代码：

1. $s<span class="pbg2" {if $upgrademenu} id="upgradeprogress_$post[pid]" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up$post[pid]_menu'});"{/if}><span class="pbr2" style="width:$post['upgradeprogress']%;"></span></span>$e

复制代码

替换为：

1. $s<span class="pbg2 jzbar-upgrade-bar" {if $upgrademenu} id="upgradeprogress_$post[pid]" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up$post[pid]_menu'});"{/if}><span class="pbr2" style="width:$post['upgradeprogress']%;"></span><span class="jzbar-upgrade-percent">$post['upgradeprogress']%</span></span>$e

复制代码

改动说明：

• 给外层 span 增加了 jzbar-upgrade-bar 自定义 class
• 在 pbr2 后面增加了 jzbar-upgrade-percent 百分比文字元素，输出 $post ['upgradeprogress']%
  

---

三、修改文件 2：样式文件（CSS）
文件路径： template / 你的模板名 /common/extend_common.css
在文件末尾追加以下代码：

1. 
   
2. /* ============================================
   
3. 自定义：用户等级进度条美化
   
4. ============================================ */
   
5. .pbg2.jzbar-upgrade-bar {
   
6. position: relative;
   
7. width: 130px;
   
8. height: 14px;
   
9. margin: 4px auto;
   
10. background: #f0f2f5;
    
11. border: 1px solid #e4e7ed;
    
12. border-radius: 7px;
    
13. overflow: hidden;
    
14. box-shadow: inset 0 1px 3px rgba (0,0,0,0.06);
    
15. }
    
16. 
    
17. .pbg2.jzbar-upgrade-bar .pbr2 {
    
18. position: relative;
    
19. display: block;
    
20. height: 100%;
    
21. border-radius: 6px;
    
22. background: linear-gradient(90deg, #1479d7 0%, #4aa3ff 50%, #1479d7 100%);
    
23. background-size: 200% 100%;
    
24. box-shadow: 0 0 8px rgba(20, 121, 215, 0.35);
    
25. transform-origin: left center;
    
26. animation: jzbar-pbr2-flow 2.5s linear infinite, jzbar-pbr2-grow 1.2s ease-out;
    
27. transition: filter 0.3s ease, box-shadow 0.3s ease;
    
28. }
    
29. 
    
30. .pbg2.jzbar-upgrade-bar .pbr2::before {
    
31. content: '';
    
32. position: absolute;
    
33. top: 0;
    
34. left: -100%;
    
35. width: 100%;
    
36. height: 100%;
    
37. background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    
38. animation: jzbar-pbr2-shine 2s ease-in-out infinite;
    
39. }
    
40. 
    
41. .jzbar-upgrade-percent {
    
42. position: absolute;
    
43. top: 50%;
    
44. left: 50%;
    
45. transform: translate(-50%, -50%);
    
46. font-size: 10px;
    
47. font-weight: 700;
    
48. color: #fff;
    
49. text-shadow:
    
50. 0 0 1px rgba(0,0,0,0.9),
    
51. 0 0 2px rgba(0,0,0,0.8),
    
52. 0 1px 2px rgba(0,0,0,0.6);
    
53. z-index: 2;
    
54. pointer-events: none;
    
55. white-space: nowrap;
    
56. line-height: 1;
    
57. letter-spacing: 0.3px;
    
58. }
    
59. 
    
60. .pbg2.jzbar-upgrade-bar:hover .pbr2 {
    
61. filter: brightness(1.12);
    
62. box-shadow: 0 0 12px rgba(20, 121, 215, 0.55);
    
63. }
    
64. 
    
65. @keyframes jzbar-pbr2-flow {
    
66. 0% { background-position: 200% 0; }
    
67. 100% { background-position: -200% 0; }
    
68. }
    
69. 
    
70. @keyframes jzbar-pbr2-grow {
    
71. 0% { transform: scaleX(0); }
    
72. 100% { transform: scaleX(1); }
    
73. }
    
74. 
    
75. @keyframes jzbar-pbr2-shine {
    
76. 0% { left: -100%; }
    
77. 60% { left: 100%; }
    
78. 100% { left: 100%; }
    
79. }
    

复制代码

---

四、三种动画效果说明

jzbar-pbr2-flow	渐变色左右流动	2.5 秒	无限循环
jzbar-pbr2-shine	白色高光从左扫到右	2 秒	无限循环
jzbar-pbr2-grow	页面加载时进度从 0 展开	1.2 秒	只播放一次

百分比文字可读性方案： 白色文字 + 三层深色 text-shadow 模拟描边，在灰色底色和蓝色填充上都能看清。

---

五、部署步骤

• 上传修改后的两个文件到服务器对应目录
• 后台 → 工具 → 更新缓存 → 全选 （特别要选 "CSS 缓存" 和 "模板缓存"）→ 提交
• 前台帖子页面按 Ctrl+F5 强制刷新浏览器缓存
  

注意： 只刷新页面不更新缓存是看不到效果的，Discuz 的 CSS 和模板都有编译缓存机制。

---

六、踩坑提醒：为什么用 extend_common.css 而不是 extend_module.css？

这是本教程最关键的经验分享！

Discuz 的 CSS 合并机制（source/function/cache/cache_styles.php）会自动加载模板目录下的 extend_< 文件名 >.css 作为对应基础 CSS 的扩展：

extend_common.css	style_XX_common.css	所有页面	✅ 是
extend_module.css	style_XX_module.css	首页、列表等模块页	❌ 否

结论： 帖子内容页（viewthread）只加载 common.css 和 forum_viewthread.css， 不加载 module.css 。所以进度条样式必须写在 extend_common.css 里，写在 extend_module.css 里在帖子页完全不生效！

---

七、自定义调整指南

进度条宽度	.pbg2.jzbar-upgrade-bar 的 width（默认 130px）
进度条高度	.pbg2.jzbar-upgrade-bar 的 height（默认 14px）
主色调	.pbr2 的 linear-gradient 颜色值（默认 #1479d7，改成你网站的主色）
流动动画速度	jzbar-pbr2-flow 的时长（默认 2.5s，越小越快）
光泽动画速度	jzbar-pbr2-shine 的时长（默认 2s）
百分比字号	.jzbar-upgrade-percent 的 font-size（默认 10px）
发光强度	.pbr2 的 box-shadow 透明度（默认 0.35）

配色建议： 把 #1479d7 替换成你网站 logo 的主色调，保持整体风格统一。可以用浏览器 F12 取色器吸取 logo 颜色。

---

八、文件清单汇总

template / 模板名 /forum/viewthread_profile_node.php	新增 / 修改	没有就从 default 复制，修改进度条 HTML 结构
template / 模板名 /common/extend_common.css	追加	在文件末尾追加 CSS 样式

本教程基于 Discuz X5.0 实测通过，其他版本可参考调整。如有问题欢迎跟帖交流。

本文永久链接地址：https://www.jzbar.net/thread-25140-1-1.html

欣儿

😀非常满意👍