在前端開發中，進度條可以作為一個非常實用的交互控件，可以讓用戶直觀地了解任務的完成情況。在 CSS3 中，我們可以使用 border-radius 屬性來創建圓形，進而制作出三個圓點進度條。

下面是樣式代碼：

.progress {
display: flex;
align-items: center;
justify-content: center;
}
.progress-dot {
width: 16px;
height: 16px;
margin: 0 4px;
border-radius: 50%;
background-color: #ccc;
}
.progress-dot.active {
background-color: #f00;
}

其中，.progress用來控制進度條的整體樣式，.progress-dot顯示一個圓點的樣式，.progress-dot.active表示當前步驟所在的圓點樣式。

下面是 HTML 代碼：

在 HTML 文件中，我們可以按照當前步驟的進度將.progress-dot元素的.active類加在不同的圓點上，以達到不同的進度效果。

通過使用 CSS3 的 border-radius 屬性和靈活運用類樣式，我們可以輕松地制作出三個圓點進度條，讓用戶更加直觀地了解任務的完成情況。