phpMyAdmin 5.x 的进度条由 .ajax_clock 类控制，它用于渲染 SQL 执行中的旋转动画，而非 AJAX 进度条（后者为 .ajax_progress）；该类默认定义在 css/common.css 中，可通过自定义 CSS 安全覆盖。
phpMyAdmin 5.x 的进度条由哪个 CSS 类控制？
phpmyadmin 5.x 使用 .ajax_clock 类渲染执行长耗时 sql（如大表导入、alter 操作）时的旋转动画，它本质上是一个带 animation 的 <div>，默认样式定义在 js/dist/common.js 动态注入或 css/common.css 中。但注意：该类**不用于 ajax 请求进度条**（那是 .ajax_progress），只用于“正在执行”状态的视觉反馈。
实际生效的样式优先级顺序是：common.css → theme/css/theme.css → 自定义 CSS 覆盖。直接改源码不推荐，应走主题覆盖路径。
如何安全覆盖进度条样式而不破坏更新？
phpMyAdmin 5.x 支持通过 config.inc.php 指定自定义 CSS 文件，这是唯一官方支持的样式定制方式。把你的样式写进独立文件，再通过配置加载，升级时不会被覆盖。
- 新建文件
/usr/share/phpmyadmin/custom-progress.css（路径需与 web 服务器可访问路径一致） - 在
config.inc.php中添加：$cfg['Servers'][$i]['custom_css'] = 'custom-progress.css';
- 确保该 CSS 文件中使用足够强的选择器，例如：
.ajax_clock {<br> width: 24px;<br> height: 24px;<br> border: 3px solid #e0e0e0;<br> border-top-color: #1a73e8;<br> border-radius: 50%;<br> animation: custom-spin 1s linear infinite;<br>}<br>@keyframes custom-spin {<br> 0% { transform: rotate(0deg); }<br> 100% { transform: rotate(360deg); }<br>}
为什么改了 CSS 还没生效？常见原因排查
缓存和选择器权重是两大拦路虎。浏览器缓存、PHP opcode 缓存（如 OPcache）、甚至 nginx 的静态文件缓存都可能让新 CSS 不加载。
- 强制刷新页面并清空浏览器缓存（Ctrl+Shift+R），检查开发者工具 Network 面板确认
custom-progress.css是否 200 返回且内容正确 - 检查是否误用了
.ajax_progress—— 它控制的是导入/导出文件时的百分比条，不是 SQL 执行中的旋转图标 - 避免用
!important；改用更具体的选择器，比如body .ajax_clock或#serverinfo .ajax_clock - 确认 phpMyAdmin 版本 ≥ 5.1.0：早期 5.0.x 存在 CSS 注入时机问题，
custom_css可能未被解析
能否动态替换为文字提示或进度百分比？
不能直接靠 CSS 实现——.ajax_clock 是纯 CSS 动画，没有 DOM 结构承载文本。若需显示“正在执行第 X 行…”或实时百分比，必须修改 JS 逻辑，而这会带来升级风险。
立即学习“PHP免费学习笔记（深入）”；
可行折中方案：
- 用 CSS 隐藏原图标：
.ajax_clock { display: none; } - 在相邻 DOM 节点（如
#loading或.notice）里用 JS 注入文字提示，监听ajaxStart/ajaxStop事件 - 但注意：phpMyAdmin 5.x 的 AJAX 事件绑定分散在多个模块（
sql.js、import.js），无统一钩子，容易漏掉场景
真正稳定的进度反馈，得依赖后端返回的 X-Progress-ID 和轮询机制，这已超出样式层范畴——你调的不是“进度条”，而是整个执行生命周期的可观测性设计。
