我需要的效果如下
实现代码如下:
HTML部分:
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill"></div>
<div class="progress-icon">
<img src="your-icon.png" alt="Icon">
</div>
</div>
</div>
CSS部分
.progress-container {
width: 100%;
height: 20px;
background-color: #f0f0f0;
position: relative;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #007bff;
position: relative;
overflow: hidden;
}
.progress-fill {
width: 50%; /* 设置进度条的宽度 */
height: 100%;
background-color: #28a745;
}
.progress-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 40px; /* 调整图标容器的宽度 */
height: 40px; /* 调整图标容器的高度 */
background-color: #007bff;
border-radius: 50%;
}
.progress-icon img {
width: 24px; /* 调整图标的宽度 */
height: 24px; /* 调整图标的高度 */
}