/** * 「加载」自定义特效示例 * 系统会把当前句子的 DOM 元素传进来，只需实现 applyEffect(targetEl) */ function applyEffect(targetEl) { if (!targetEl) return; // 防止同一句话被多次应用这个特效 if (targetEl.dataset.customLoadingApplied === ‘1’) { return; } targetEl.dataset.customLoadingApplied = ‘1’; // 记录原始内容 const originalHtml = targetEl.innerHTML; // 外层容器：包住“加载 UI + 原文本” const wrapper = document.createElement(‘span’); wrapper.style.display = ‘inline-block’; wrapper.style.position = ‘relative’; wrapper.style.verticalAlign = ‘baseline’; // ================== 顶部：进度条 + 百分比 ================== const loadingBox = document.createElement(‘div’); loadingBox.style.display = ‘flex’; loadingBox.style.flexDirection = ‘column’; loadingBox.style.alignItems = ‘center’; loadingBox.style.justifyContent = ‘center’; loadingBox.style.fontSize = ‘0.85em’; // 进度条外框 const barOuter = document.createElement(‘div’); barOuter.style.position = ‘relative’; barOuter.style.width = ‘140px’; barOuter.style.height = ‘8px’; barOuter.style.borderRadius = ‘999px’; barOuter.style.overflow = ‘hidden’; barOuter.style.border = ‘1px solid rgba(255, 255, 255, 0.7)’; barOuter.style.background = ‘rgba(255,255,255,0.08)’; barOuter.style.boxSizing = ‘border-box’; // 进度条内部条 const barInner = document.createElement(‘div’); barInner.style.width = ‘0%’; barInner.style.height = ‘100%’; barInner.style.borderRadius = ‘999px’; barInner.style.background = ‘linear-gradient(90deg, #4ade80, #22d3ee)’; barInner.style.transition = ‘width 0.08s linear’; barOuter.appendChild(barInner); // 百分比文字 const percentText = document.createElement(‘div’); percentText.style.marginTop = ‘4px’; percentText.style.textAlign = ‘center’; percentText.style.opacity = ‘0.9’; percentText.style.userSelect = ‘none’; percentText.textContent = ‘加载中… 0%’; loadingBox.appendChild(barOuter); loadingBox.appendChild(percentText); // ================== 底部：原文本（先隐藏，后面淡入） ================== const originalSpan = document.createElement(‘span’); originalSpan.innerHTML = originalHtml; // 保留原有标签/样式 originalSpan.style.display = ‘inline-block’; originalSpan.style.marginTop = ‘6px’; originalSpan.style.opacity = ‘0’; originalSpan.style.transition = ‘opacity 0.6s ease’; // ================== 拼装结构 ================== targetEl.innerHTML = ”; wrapper.appendChild(loadingBox); wrapper.appendChild(originalSpan); targetEl.appendChild(wrapper); // ================== 进度逻辑 ================== let progress = 0; const totalDuration = 2000; // 总加载时长（毫秒） const step = 40; // 定时器间隔（毫秒） const inc = (100 * step) / totalDuration; const timer = setInterval(() => { progress += inc; if (progress >= 100) { progress = 100; } const showPercent = Math.round(progress); barInner.style.width = showPercent + ‘%’; percentText.textContent = ‘加载中… ‘ + showPercent + ‘%’; if (progress >= 100) { clearInterval(timer); // 进度到 100%：改成“加载成功” percentText.textContent = ‘加载成功’; // 稍作停顿，然后：上面的加载 UI 淡出，下面的原文本淡入 setTimeout(() => { loadingBox.style.transition = ‘opacity 0.6s ease’; loadingBox.style.opacity = ‘0’; originalSpan.style.opacity = ‘1’; // 动画结束后可以选择把 loadingBox 从 DOM 中移除 const cleanup = () => { loadingBox.removeEventListener(‘transitionend’, cleanup); if (loadingBox.parentNode) { loadingBox.parentNode.removeChild(loadingBox); } }; loadingBox.addEventListener(‘transitionend’, cleanup); // 兜底：防止某些浏览器不触发 transitionend setTimeout(() => { if (loadingBox.parentNode) { loadingBox.parentNode.removeChild(loadingBox); } }, 900); }, 400); // “加载成功” 停留 0.4s 再开始淡出 } }, step); }