如何用CSS和HTML实现视频进度条圆形指针（Vue+Nuxt3）

直接给你两种可行方案，基于你现有代码修改即可：

方案1：使用伪元素（无需新增DOM） #

保持你的HTML结构不变：

<div class="progress-bar" @click="skipVideo">
    <div :style="{ width: progressPercentage() + '%' }" class="current-bar"></div>
</div>

添加以下CSS样式：

.progress-bar {
  /* 容器设相对定位，让内部元素基于它定位 */
  position: relative;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  cursor: pointer;
  overflow: visible; /* 避免指针被容器截断 */
}

.current-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #1976d2;
  border-radius: 3px;
}

/* 用伪元素生成圆形指针 */
.current-bar::after {
  content: '';
  position: absolute;
  right: -6px; /* 让指针一半在进度条内，一半在外 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 12px;
  height: 12px;
  background-color: #1976d2;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

方案2：新增DOM元素作为指针 #

修改HTML结构，给进度条添加独立的指针元素：

<div class="progress-bar" @click="skipVideo">
    <div :style="{ width: progressPercentage() + '%' }" class="current-bar">
        <div class="progress-handle"></div>
    </div>
</div>

对应的CSS：

.progress-bar {
  position: relative;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  cursor: pointer;
  overflow: visible;
}

.current-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #1976d2;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px; /* 让指针对齐进度条右端 */
}

.progress-handle {
  width: 12px;
  height: 12px;
  background-color: #1976d2;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

你之前的问题原因 #

你用span/div没显示，大概率是这几个问题：

• 没设置background-color，空元素默认透明无法看见
• 用了inline元素（比如span）却没设置display: inline-block或block，导致width/height不生效
• 没正确设置定位，指针被进度条容器截断或者偏移到不可见区域

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