隨著Web應用程序的增長，交互性也變得越來越重要。當需要向用戶顯示音頻或視頻時，進度條成為了一種重要的控件。在CSS中，我們可以輕松地創建一個可拖動的點擊進度條。

HTML:
CSS:
.progress-bar {
width: 300px;
height: 6px;
background-color: #ddd;
border-radius: 10px;
cursor: pointer;
position: relative;
}
.progress {
width: 0%;
height: 100%;
background-color: blue;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}

在上面的示例中，我們創建了一個具有灰色背景和藍色進度的進度條。默認情況下，進度條的寬度為0%。鼠標在進度條上時，將會改變進度條的寬度并顯示百分比。我們可以通過以下CSS來實現這一點：

.progress-bar:hover .progress {
display: block;
}
.progress-bar:hover:before {
content: attr(data-progress);
display: inline-block;
position: absolute;
top: -25px;
left: 0;
width: 100%;
font-size: 12px;
text-align: center;
}
.progress-bar:hover:after {
content: '';
display: block;
position: absolute;
top: -5px;
left: calc(100% - 10px);
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #888;
}

在上面的CSS中，我們通過:hover來定義進度條的鼠標懸停狀態。我們還通過:before和:after偽元素添加了一個指示百分比的標簽和一個箭頭。我們還需要為進度條添加一些JavaScript代碼：

const progressBar = document.querySelector('.progress-bar');
progressBar.addEventListener('click', function(e) {
const progress = document.querySelector('.progress');
const offsetX = e.pageX - this.offsetLeft;
const width = this.offsetWidth;
const percent = offsetX / width * 100;
progress.style.width = percent + '%';
progress.setAttribute('data-progress', percent + '%');
});

在這里，我們將進度條的點擊事件綁定到.progress-bar元素上，并計算鼠標的偏移量。我們還需要將進度條的寬度設置為百分比，并將其存儲在[data-progress]屬性中，以便在鼠標懸停時使用。現在我們已經創建了一個可拖動的點擊進度條，用戶可以方便地控制音頻或視頻的播放進度了。