html jQuery加载进度条插件代码下载

新的一年开始了、 虽然大部分程序员都已经开始了一年工作、但是可辛的是我还是休息呢、哈哈、程序员大军们又开始了一年的忙碌、首先祝大家在新的一年里都能找到好工作、都能获得高薪、新的一年开始了、现在为大家分享一个HTML的进度条的Demo、希望对大家有用、先来看看效果图片吧、非常不错哦

引入js代码库

<script src="js/prefixfree.min.js"></script>

HTML代码

<div class="container">
	<div class="progress">
		<div class="progress-bar">
			<div class="progress-shadow"></div>
		</div>
	</div>
</div>

CSS代码

/* HELPERS */
.text-center {
  text-align: center;
}

/* GRID */
.container {
  left: 50%;
  position: absolute;
  top: 25%;
  transform: translate(-50%, -50%);
}

/* PROGRESS */
.progress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 24em;
}
.progress-bar {
  animation-duration: 3s;
  animation-name: width;
  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}
.progress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  width: 100%;
}

/* ANIMATIONS */
@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

最后给大家献上源代码、觉得有用的哥们可以下载研究研究、web进度条

源代码链接: http://dwtedx.com/download.html?bdkey=s/1eQEiezg 密码: qve6