css 实现炫酷的条纹进度条效果_css画圆形进度条
效果图：
html：
<!--进度条-->
<div class="progress-wrap">
<div class="progress-inner">
<div class="progress-nums"></div>
</div>
<span>60%</span>
</div>css：
/*进度条*/
.progress-wrap {
width: 100%;
height: 12px;
border-radius: 8px;
position: relative;
}
.progress-wrap span{
position:absolute;
left:50%;
top:-20px;
color:#000;
}
/*进度条底层背景样式*/
.progress-inner {
height: inherit;
background: rgb(142 193 255 / 20%);
border-radius: 8px;
}
/*进度层样式效果，使用动画效果*/
.progress-nums {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #008bdd 25%, #49beff 0, #49beff 50%, #008bdd 0, #008bdd 75%, #49beff 0);
background-size: 16px 16px;
animation: panoramic 30s linear infinite;
}
/*定义动画*/
@keyframes panoramic{
to {
background-position: 200% 0;
}
}