html jQuery加载进度条插件代码下载
2015-02-25 22:16:40  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 5911
• 0

新的一年开始了、 虽然大部分程序员都已经开始了一年工作、但是可辛的是我还是休息呢、哈哈、程序员大军们又开始了一年的忙碌、首先祝大家在新的一年里都能找到好工作、都能获得高薪、新的一年开始了、现在为大家分享一个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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛