Angular.js中点击按钮时如何关联显示带Loading文本的SVG进度条

你可以按照以下步骤关联按钮和加载组件的逻辑，以下是原生JavaScript的实现方案，框架场景逻辑可直接复用：

步骤1：添加基础样式控制显示和交互状态 #

/* 默认隐藏环形进度条 */
.progress-bar-round {
  display: none;
}
/* 按钮加载中状态，避免重复点击 */
.continue-btn.loading {
  pointer-events: none;
  opacity: 0.6;
}

步骤2：给按钮添加标识方便事件绑定 #

<button id="continueBtn" class="continue-btn">Continue</button>
<!-- 你原有的SVG代码直接放在页面对应位置即可 -->
<svg class="center-block progress-bar-round" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
            transform="rotate(-90,100,100)" stroke-linecap="round"/>
    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
    <text class="percentage" text-anchor="middle" x="100" y="130">0%</text>
</svg>

如果你用的是带模板语法的框架，可以把0%替换回你原本的{{progress}}这类模板变量。

步骤3：编写交互逻辑 #

// 获取DOM元素
const continueBtn = document.getElementById('continueBtn');
const progressBar = document.querySelector('.progress-bar-round');
const loaderCircle = document.getElementById('loader');
const percentageText = document.querySelector('.percentage');
// 环形周长固定值：2πr，r=90
const CIRCUMFERENCE = 2 * Math.PI * 90;

continueBtn.addEventListener('click', () => {
  // 按钮置为不可点击状态
  continueBtn.classList.add('loading');
  // 显示进度条
  progressBar.style.display = 'block';
  let progress = 0;

  // 模拟进度更新，实际使用时替换为真实业务的进度回调即可
  const timer = setInterval(() => {
    progress += 1;
    // 计算当前进度对应的环形填充长度
    const fillLength = (progress / 100) * CIRCUMFERENCE;
    loaderCircle.setAttribute('stroke-dasharray', `${fillLength}, 20000`);
    percentageText.textContent = `${progress}%`;

    // 进度满100%时收尾处理
    if (progress >= 100) {
      clearInterval(timer);
      continueBtn.classList.remove('loading');
      // 此处可添加加载完成后的业务逻辑，比如跳转页面、提交表单等
    }
  }, 30); // 数值越小加载速度越快
})

框架场景适配 #

• Vue：将progress、进度条显隐状态定义为响应式变量，直接绑定到svg的对应属性上，点击按钮时触发进度更新逻辑即可
• React：用useState存储progress和显隐状态，逻辑和原生实现完全一致

内容的提问来源于stack exchange，提问作者user15974221