进度条demo,粘贴复制代码直接用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>进度条插件</title> <style> .progress { /* 总进度条 */ width: 200px; height: 20px; background-color: #ccc; box-shadow: inset 0px 2px 4px 0px rgba(70, 85, 63, 0.16); border-radius: 7px; position: relative; } .progress .progress-bar { /* 进度 */ height: 20px; width: 0; background-color: #93db70; border-radius: 7px; } .progress .progress-bar .progress-text { color: #333; position: absolute; right: -40px; top: -0; } </style> </head> <body> <div class="progress"> <div class="progress-bar" id="progress_bar"> <div class="progress-text"></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script> /* 进度条 */ var setProgress = function (id,per,allWidth) { $('#' + id).width(per * allWidth + 'px').children(".progress-text").html(per * 100 + "%"); }; setProgress('progress_bar',0.3,200); //id,小数,进度条总宽度 </script> </html>