如何在css和Html中制作视频进度条上的圆形指针？

Question

我是一名初级前端开发人员，我正在构建一个视频播放器，但我无法在视频进度条的末尾创建那个圆形指针。我试图创建一个带有尺寸的 span 和 div，但它没有在浏览器中显示任何内容。 我正在使用 vue 和 Nuxt 3 Js。

这是我的代码示例：

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

我尝试创建一个带有尺寸的 span 和 div，但它没有在浏览器中显示任何内容。