html jQuery加载进度条插件代码下载
2015-02-25 22:16:40 By: shinyuu
新的一年开始了、 虽然大部分程序员都已经开始了一年工作、但是可辛的是我还是休息呢、哈哈、程序员大军们又开始了一年的忙碌、首先祝大家在新的一年里都能找到好工作、都能获得高薪、新的一年开始了、现在为大家分享一个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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛