jimdo如何添加html5进度环_jimdo进度环html5实现与颜色设置【攻略】

可在Jimdo中通过svg+css、纯css动画或progressbar.js库三种方式添加html5进度环：第一种兼容性好且免JS；第二种语义化强、易于复用；第三种支持精确数值控制与事件响应。

如果您希望在Jimdo网站中添加html5进度环（progress ring），但发现Jimdo编辑器不直接支持SVG或原生动态渲染，可通过嵌入自定义HTML代码实现。以下是具体操作步骤：

一、使用SVG + CSS实现环形进度条

该方法利用SVG的元素配合CSS旋转与描边动画，兼容Jimdo所有版本，无需javaScript即可运行，且支持颜色自由设置。

1、复制以下完整SVG HTML代码：

立即学习“前端免费学习笔记（深入）”；

2、登录Jimdo后台，进入需编辑的页面，点击“+ 添加区块” → 选择“HTML/javascript”区块（部分Jimdo版本显示为“自定义HTML”）。

3、将上述代码粘贴至编辑框中，点击保存。

4、修改颜色：将代码中stroke="#4CAF50"替换为任意十六进制色值（如#2196F3、#FF5722），即可变更进度环主色。

5、调整进度：若需静态显示某百分比（如75%），将stroke-dasharray="283"保持不变，把stroke-dashoffset设为283 × (1 − 0.75) = 70.75，并移除标签。

二、通过CSS @keyframes创建纯CSS环形动画

此方案完全基于CSS，避免内联SVG结构，适合对语义化要求较高的场景，且可复用样式类名多次插入不同颜色进度环。

1、在Jimdo站点设置中找到“自定义CSS”入口（路径通常为：设置 → 设计 → 自定义CSS），粘贴以下CSS代码：

@keyframes rotate-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ring-anim { width: 100px; height: 100px; border-radius: 50%; border: 8px solid transparent; border-top-color: #FF9800; animation: rotate-ring 1.5s linear infinite; }

2、返回页面编辑模式，添加HTML区块，输入：

3、如需多色并存，在CSS中新增类名，例如.ring-blue { border-top-color: #2196F3; }，并在HTML中调用class="ring-anim ring-blue"。

4、控制尺寸：修改width和height值（必须相等）以适配布局，同时同步调整border-width保持比例协调。

三、嵌入外部JS库（progressbar.js）实现高精度控制

当需要精确绑定数值、响应式更新或事件回调时，可引入轻量级progress.js库，适用于Jimdo Business及以上版本（支持外部脚本加载）。

1、在HTML区块中插入以下完整代码段（含cdn链接与初始化）：

2、确保Jimdo站点未启用“禁用JavaScript”选项（默认开启），否则脚本将被拦截。

3、修改进度值：将circle.animate(0.85)中的0.85改为0～1之间的任意小数（如0.3对应30%）。

4、更换颜色：同步修改两处'#9C27B0'为所需颜色，包括color参数与to.color字段。