首页 > 代码库 > 进度条
进度条
今天学习了一下进度条，bootstrap、html5进度条，看了一下都不错，优点分明bootstrap兼容性强、美观、样式多，html5兼容性不行，但简小。不过这两者都一个缺点是体验感不强，所有我使用了三种方法写了进度条。
自定义的需要引用bootstrap-progressbar.js和bootstrap-progressbar-3.3.4.css 地址：https://github.com/minddust/bootstrap-progressbar
具体看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <link href=http://www.mamicode.com/"../css/bootstrap.css" rel="stylesheet" /> <link rel="stylesheet" href=http://www.mamicode.com/"../css/bootstrap-progressbar-3.3.4.css"> <script src=http://www.mamicode.com/"../js/jquery-3.1.1.min.js"></script> <script src=http://www.mamicode.com/"../js/bootstrap.min.js"></script></head><body><fieldset> <legend>自己的进度条，有动画有显示值</legend> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" data-transitiongoal="60"></div> </div> <script> $(document).ready(function () { $(‘.progress .progress-bar‘).progressbar({ display_text: ‘center‘ }); }); </script></fieldset><br/>html5<progress max="100" value=http://www.mamicode.com/"40"></progress><br/><fieldset> <legend>bootstrap进度条</legend> <p>普通</p> <div class="progress"> <div class="progress-bar progress-bar-success" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">30% 完成</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <br/> <p>条纹</p> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">30% 完成</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" style="width: 40%"> <span class="sr-only">40% 完成</span> </div> </div></fieldset></body> <script src=http://www.mamicode.com/"../js/bootstrap-progressbar.js"></script></html>
进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。