帮我写一个html可以随屏幕宽度改变的圆形进度条
时间: 2023-07-31 10:07:59 浏览: 43
好的,以下是一个可以随着屏幕宽度改变的圆形进度条的 HTML 和 CSS 代码:
HTML:
```html
<div class="progress-circle">
<div class="progress">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
</div>
<div class="progress-text">
<span>50%</span>
</div>
</div>
```
CSS:
```css
.progress-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
.progress-circle .progress {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.progress-circle .progress-left,
.progress-circle .progress-right {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
}
.progress-circle .progress-left {
left: 0;
}
.progress-circle .progress-right {
left: 50%;
}
.progress-circle .progress-bar {
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
border-radius: 50%;
animation: progress 2s linear forwards;
}
.progress-circle .progress-left .progress-bar {
animation-delay: 1s;
}
.progress-circle .progress-right .progress-bar {
animation-delay: 0s;
}
.progress-circle .progress-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.progress-circle .progress-text span {
font-weight: bold;
}
@keyframes progress {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
```
以上代码使用了 CSS3 动画和 transform 属性来实现进度条的动画效果,支持响应式布局。你可以自定义进度条的颜色、大小、字体等样式。