HTML和CSS进度条不会在结尾处停止

是因为进度条的长度是由CSS的宽度属性控制的，而不是由HTML的进度属性控制的。当设置进度条的宽度为100%时，进度条会填满其父元素的宽度，但是如果父元素的宽度不是固定的，进度条就会在结尾处停止。

要解决这个问题，可以使用CSS的动画属性来实现进度条的动态效果。通过设置动画的关键帧，可以让进度条从0%宽度逐渐增长到100%宽度，从而实现进度条的连续动画效果。

以下是一个示例代码，演示如何使用CSS动画实现进度条的连续动画效果：

HTML代码：

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

CSS代码：

.progress-bar {
  width: 0;
  height: 10px;
  background-color: blue;
  animation: progress 5s linear infinite;
}

@keyframes progress {
  0% { width: 0; }
  100% { width: 100%; }
}

在上述代码中，通过设置.progress-bar的宽度为0，并使用animation属性指定了一个名为progress的动画，动画的持续时间为5秒，线性过渡，并且设置了无限循环。

通过@keyframes规则定义了progress动画的关键帧，从0%到100%的宽度变化。

这样，当页面加载时，进度条会从0%宽度逐渐增长到100%宽度，实现了进度条的连续动画效果。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考：腾讯云CDN产品介绍。腾讯云CDN可以加速网站的内容分发，提高用户访问网站的速度和体验。