Jimdo中实现HTML5加载动画的五种方法：一、内联SVG+CSS动画；二、Canvas+requestAnimationFrame；三、Animate.css CDN；四、自定义@keyframes+infinite；五、data属性+轻量JS控制。
如果您在 Jimdo 网站中希望添加自定义 HTML5 加载动画，但页面未按预期显示动画效果或无法实现循环播放，则可能是由于 Jimdo 的 HTML 插入限制、脚本执行策略或 CSS 作用域隔离所致。以下是实现该功能的多种可行方法：
一、使用内联 SVG + CSS 动画嵌入
此方法不依赖外部资源或 JavaScript，仅通过纯 HTML5 和内联 CSS 实现轻量级、可循环的加载动画，兼容 Jimdo 的 HTML 模块安全策略。
1、在 Jimdo 编辑器中插入“HTML/JavaScript”模块。
2、粘贴以下代码：
立即学习“前端免费学习笔记（深入）”；
<div style="display:flex;justify-content:center;align-items:center;width:100%;height:80px;"><svg width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="none" stroke="#3498db" stroke-width="4" stroke-dasharray="100" stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" values="0;100;0" dur="1.2s" repeatCount="indefinite" /></circle></svg></div>
3、保存并预览页面，动画将以蓝色环形旋转形式持续循环。
二、嵌入 Canvas 动画并启用自动循环
利用 HTML5 <canvas> 绘制帧动画，通过 requestAnimationFrame 实现高精度、低延迟的循环渲染，适用于需动态控制节奏的加载场景。
1、在 Jimdo HTML 模块中插入以下完整代码段：
<div id="jimdo-canvas-loader" style="width:60px;height:60px;margin:0 auto;"><canvas id="loaderCanvas" width="60" height="60"></canvas></div><script>const canvas = document.getElementById('loaderCanvas');const ctx = canvas.getContext('2d');let angle = 0;function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.arc(30, 30, 20, 0, Math.PI * 2);ctx.strokeStyle = '#e74c3c';ctx.lineWidth = 4;ctx.stroke();ctx.beginPath();ctx.arc(30, 30, 20, -Math.PI/2, -Math.PI/2 + angle * Math.PI/180);ctx.strokeStyle = '#2ecc71';ctx.lineWidth = 4;ctx.stroke();angle = (angle + 6) % 360;}function animate() {draw();requestAnimationFrame(animate);}if (canvas) animate();</script>
2、确保 Jimdo 设置中未禁用内联 script（部分 Jimdo 计划允许有限脚本执行）。
3、刷新页面后，绿色进度弧将绕红色底环匀速旋转，循环由 requestAnimationFrame 自动维持，无需手动设置 loop 属性。
三、调用外部 CSS 动画库（Animate.css + CDN）
借助 Animate.css 提供的预设 bounce、pulse 或 rotate 动画类，结合自定义 @keyframes 覆盖，可在 Jimdo 中实现声明式循环加载效果，避免手写复杂 CSS。
1、在 HTML 模块顶部插入 Animate.css CDN 链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
2、在下方添加带循环类的 HTML 元素：
<div class="animate__animated animate__rotate animate__infinite animate__slow" style="font-size:24px;text-align:center;width:100%;padding:20px;">↻</div>
3、确认 Jimdo 未拦截外部 CSS 请求；若失效，可将 animate.min.css 内容复制为内联 style 标签嵌入。
animate__infinite 类强制启用无限循环，animate__slow 控制速度为 2s/次，可替换为 animate__faster 或 animate__slower。
四、使用 CSS @keyframes + animation-iteration-count
完全自主定义动画路径与节奏，通过 animation-iteration-count: infinite 实现可靠循环，规避 Jimdo 对 JS 执行的潜在限制。
1、在 HTML 模块中插入以下结构：
<style>@keyframes jimdoSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} .jimdo-spinner {width: 40px; height: 40px; border: 3px solid #ecf0f1; border-top: 3px solid #3498db; border-radius: 50%; animation: jimdoSpin 1s linear infinite;}</style><div class="jimdo-spinner"></div>
2、检查样式是否被 Jimdo 主题 CSS 覆盖；如不生效，可在 class 名前加唯一前缀（如 jimdo-custom-spinner）。
3、保存后，元素将以顺时针匀速旋转，animation-iteration-count: infinite 是触发循环的核心声明，不可省略。
五、基于 data-* 属性的轻量 JS 循环控制器
当需响应用户交互（如点击触发加载）或配合 AJAX 状态时，使用极简 JS 监听 data-loading 状态并驱动 CSS 类切换，确保循环逻辑可控且可中断。
1、插入如下 HTML 与脚本组合：
<div id="trigger-loader" data-loading="false" style="cursor:pointer;text-align:center;padding:12px;background:#9b59b6;color:white;border-radius:4px;">点击启动加载</div><div id="js-controlled-loader" style="display:none;width:50px;height:50px;margin:16px auto;"><div style="width:100%;height:100%;background:#f1c40f;border-radius:50%;animation: pulse 1.5s infinite;"></div></div><style>@keyframes pulse {0% {transform: scale(0.95);} 50% {transform: scale(1.05);} 100% {transform: scale(0.95);}}</style><script>document.getElementById('trigger-loader').addEventListener('click', function() {const loader = document.getElementById('js-controlled-loader');const isLoading = this.dataset.loading === 'true';if (isLoading) {loader.style.display = 'none';this.dataset.loading = 'false';this.textContent = '点击启动加载';} else {loader.style.display = 'block';this.dataset.loading = 'true';this.textContent = '加载中...';}});</script>
2、点击文本即可显隐加载容器，内部黄色圆球持续脉冲缩放。
data-loading 属性用于状态追踪，pulse 动画本身已含 infinite 声明，无需额外 JS 控制循环次数。
