html :
<!DOCTYPE html>
<html>
<head>
<title>模拟进度条条纹样式</title>
<link rel="stylesheet" href="style_stripe.css">
</head>
<body>
<div class="progress_bar"></div>
</body>
</html>
css:
.progress_bar{
height: 40px;
width: 700px;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0,transparent 30px);
border-radius: 5px;
}
最终效果如下: