Progress 进度条

进度条组件，用于显示操作进度。

基础用法

<div id="demo-progress"></div>

<script>
  const progress = new SaProgress('#demo-progress', {
    percentage: 50
  });
</script>

加载 SanoUI 组件中...

不同状态

通过 status 配置进度条状态。

<div id="demo-progress-status"></div>

<script>
  // 成功状态
  new SaProgress('#demo-progress-status', {
    percentage: 100,
    status: 'success'
  });
  
  // 异常状态
  new SaProgress('#demo-progress-status', {
    percentage: 50,
    status: 'exception'
  });
  
  // 警告状态
  new SaProgress('#demo-progress-status', {
    percentage: 75,
    status: 'warning'
  });
</script>

加载 SanoUI 组件中...

圆形进度条

通过 type: 'circle' 配置圆形进度条。

<div id="demo-progress-circle"></div>

<script>
  const progress = new SaProgress('#demo-progress-circle', {
    percentage: 70,
    type: 'circle'
  });
</script>

加载 SanoUI 组件中...

显示文本

通过 showText 控制是否显示百分比文本。

<div id="demo-progress-text"></div>

<script>
  const progress = new SaProgress('#demo-progress-text', {
    percentage: 50,
    showText: true
  });
</script>

加载 SanoUI 组件中...

动画效果

进度条支持平滑的动画过渡。

<div id="demo-progress-animate"></div>
<button onclick="updateProgress()">更新进度</button>

<script>
  const progress = new SaProgress('#demo-progress-animate', {
    percentage: 0
  });
  
  function updateProgress() {
    progress.setPercentage(progress.getPercentage() + 10);
  }
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaProgressOptions	{}

配置选项

参数	说明	类型	可选值	默认值
percentage	进度百分比	number	0-100	0
status	状态	string	success / exception / warning	-
type	类型	string	line / circle	line
showText	是否显示文本	boolean	-	true
strokeWidth	进度条宽度（圆形）	number	-	6
width	进度条宽度（圆形）	number	-	126

方法

方法名	说明	参数	返回值
setPercentage	设置进度百分比	percentage: number	void
getPercentage	获取当前进度	-	number
setStatus	设置状态	status: string	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const progress = new SaProgress('#my-progress', {
  percentage: 0,
  status: '',
  type: 'line',
  showText: true
});

// 更新进度
progress.setPercentage(50);

// 设置状态
progress.setStatus('success');

// 获取当前进度
const percentage = progress.getPercentage();

文件上传进度

const progress = new SaProgress('#upload-progress', {
  percentage: 0
});

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percentage = Math.round((e.loaded / e.total) * 100);
      progress.setPercentage(percentage);
      
      if (percentage === 100) {
        progress.setStatus('success');
      }
    }
  });
  
  xhr.addEventListener('error', () => {
    progress.setStatus('exception');
  });
  
  xhr.open('POST', '/api/upload');
  xhr.send(file);
}

数据加载进度

const progress = new SaProgress('#load-progress', {
  percentage: 0
});

async function loadData() {
  try {
    const response = await fetch('/api/data');
    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;
    
    while (true) {
      const { done, value } = await reader.read();
      
      if (done) break;
      
      receivedLength += value.length;
      const percentage = Math.round((receivedLength / contentLength) * 100);
      progress.setPercentage(percentage);
    }
    
    progress.setStatus('success');
  } catch (error) {
    progress.setStatus('exception');
  }
}

实际使用场景

场景 1：文件上传进度

显示文件上传的实时进度。

<div id="upload-progress" style="margin-bottom: 1rem;"></div>
<button class="sa-button sa-button--primary" onclick="simulateUpload()">开始上传</button>

<script>
  const progress = new SaProgress('#upload-progress', {
    percentage: 0,
    showText: true
  });
  
  function simulateUpload() {
    progress.setPercentage(0);
    progress.setStatus('');
    
    let current = 0;
    const interval = setInterval(() => {
      current += 10;
      progress.setPercentage(current);
      
      if (current >= 100) {
        clearInterval(interval);
        progress.setStatus('success');
        setTimeout(() => {
          alert('上传完成！');
        }, 500);
      }
    }, 200);
  }
</script>

加载 SanoUI 组件中...

场景 2：多步骤进度

显示多步骤操作的总体进度。

<div style="margin-bottom: 1rem;">
  <div id="step-progress"></div>
  <div id="step-info" style="text-align: center; margin-top: 0.5rem; color: #666;">步骤 1 / 5</div>
</div>
<button class="sa-button sa-button--primary" onclick="nextStep()">下一步</button>

<script>
  let currentStep = 1;
  const totalSteps = 5;
  
  const progress = new SaProgress('#step-progress', {
    percentage: (currentStep / totalSteps) * 100,
    showText: true
  });
  
  function nextStep() {
    if (currentStep < totalSteps) {
      currentStep++;
      const percentage = (currentStep / totalSteps) * 100;
      progress.setPercentage(percentage);
      
      document.getElementById('step-info').textContent = `步骤 ${currentStep} / ${totalSteps}`;
      
      if (currentStep === totalSteps) {
        progress.setStatus('success');
        alert('所有步骤已完成！');
      }
    }
  }
</script>

加载 SanoUI 组件中...