css实现螺纹进度条

主要是通过间隔颜色、背景大小及旋转角度实现的，控制在合知的值即可

正常情况

<style type="text/css">
    .zh-progressbar {
        width: 300px;
        height: 150px;
        background: linear-gradient(transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);
        background-size: 20px 20px;
    }
</style>
<div class="zh-progressbar"></div>

添加角度后

<style type="text/css">
    .zh-progressbar {
        width: 300px;
        height: 15px;
        background: linear-gradient(60deg, transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);
        background-size: 20px 20px;
    }
</style>
<div class="zh-progressbar"></div>