百度云盘 传送门 密码:q6rt
柱状图动态百分比进度条效果
<html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); font-size: 40px; font-weight: 900; color: white; text-shadow: 0 0 50px black; text-transform: capitalize; font-family: 'Roboto','Helvetica','Arial',sans-serif; letter-spacing: 5px; } </style> </head> <body> <p>Gary</p> <div class="container"> <div class="sixteen columns"> <div class="row"> <h1>Horizontal Bars</h1> </div> </div> <div id="skillset" class="sixteen columns "> <div class="eight columns"> <div class="bars MT30"> <div id="bar-1"> </div> <div id="bar-2"> </div> <div id="bar-3"> </div> <div id="bar-4"> </div> <div id="bar-5"> </div> <div id="bar-6"> </div> </div> </div> <div class="two columns"> </div> <div class="clearfix"> </div> </div> <div class="row"> </div> <div class="row clear"> </div> <div class="sixteen columns"> <div class="row"> <h1>Vertical Bars</h1> </div> </div> <div class="sixteen columns "> <div class="nine columns"> <div class="bars MT30"> <div id="bar-7"> </div> <div id="bar-8"> </div> <div id="bar-9"> </div> <div id="bar-10"> </div> <div id="bar-11"> </div> <div id="bar-12"> </div> </div> </div> </div> </div> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jqbar.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#bar-1').jqbar({ label: 'ASP.NET', value: 99, barColor: '#D64747' }); $('#bar-2').jqbar({ label: 'C#', value: 59, barColor: '#FF681F' }); $('#bar-3').jqbar({ label: 'Javascript', value: 90, barColor: '#ea805c' }); $('#bar-4').jqbar({ label: 'HTML5', value: 50, barColor: '#88bbc8' }); $('#bar-5').jqbar({ label: 'CSS3', value: 60, barColor: '#939393' }); $('#bar-6').jqbar({ label: 'jQuery', value: 70, barColor: '#3a89c9' }); $('#bar-7').jqbar({ label: 'Wal', value: 90, barColor: '#D64747', orientation: 'v' }); $('#bar-8').jqbar({ label: 'Ohi', barColor: '#FF681F', value: 70, orientation: 'v' }); $('#bar-9').jqbar({ label: 'Song', barColor: '#ea805c', value: 50, orientation: 'v' }); $('#bar-10').jqbar({ label: 'Pisho', barColor: '#88bbc8', value: 90, orientation: 'v' }); $('#bar-11').jqbar({ label: 'Mara', barColor: '#939393', value: 70, orientation: 'v' }); $('#bar-12').jqbar({ label: 'Dagha', barColor: '#3a89c9', value: 50, orientation: 'v' }); }); </script> </body> </html>