使用js代码实现进度条一共30秒从0-100，第一个10秒，加载到百分之50，第二个十秒，加载到90%，第三个十秒，加载到100%

可以使用JavaScript和HTML/CSS来实现这个进度条效果。下面是一段示例代码：

HTML代码：

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS代码：

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #f2f2f2;
  position: relative;
}

.progress {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 1s ease;
}

JavaScript代码：

const progressBar = document.querySelector('.progress');
let progress = 0;

function updateProgress(targetProgress, duration) {
  const increment = (targetProgress - progress) / (duration / 1000);
  const intervalId = setInterval(() => {
    progress += increment;
    progressBar.style.width = `${progress}%`;
    if (progress >= targetProgress) {
      clearInterval(intervalId);
    }
  }, 10);
}

// 第一个10秒
updateProgress(50, 10000);

// 第二个10秒
setTimeout(() => {
  updateProgress(90, 10000);
}, 10000);

// 第三个10秒
setTimeout(() => {
  updateProgress(100, 10000);
}, 20000);

这段代码会在页面中创建一个进度条，并且在三个阶段分别更新进度条的宽度。在第一个10秒中，进度条会从0%加载到50%，第二个10秒中会从50%加载到90%，最后10秒则会完成进度条到100%的加载。