JS实现进度条效果

CSS部分：

			.div{
				height: 100px;
				width: 300px;
				background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				background-color: green;
				background-size: 40px 40px;
			}

HTML部分：

         <div class="div"></div>

效果：

注意点：进度条采用线性渐变操作。background-image:linear-gradient。要使得没有颜色之间没有过渡的效果，就在同一状态设置两个颜色。比如在25%处， rgba(255, 255, 255, .15) 25%, transparent 25%。