Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Animated Bootstrap Progress Bars, Free Time Learning, Bootstrap 3 Snippets</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> .progress { height: 35px; font-family:arial,sans-serif !important; border-radius:1px; } .progress .skill { font-size:12px; font-family:arial,sans-serif !important; line-height: 35px; border-radius:1px; padding: 0; margin: 0 0 0 20px; text-transform: uppercase; } .progress .skill .val { float: right; font-style: normal; margin: 0 20px 0 0; } .progress-bar { text-align: left; transition-duration: 3s; } </style> <div class="container"> <div class="row"> <h2>Animated Bootstrap Progress Bars </h2> <!-- Skill Bars --> <div class="progress skill-bar "> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span class="skill">HTML5 <i class="val">90%</i></span> </div> </div> <div class="progress skill-bar"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" > <span class="skill">CSS3<i class="val">82%</i></span> </div> </div> <div class="progress skill-bar"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> <span class="skill">Bootstrap<i class="val">95%</i></span> </div> </div> <div class="progress skill-bar"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"> <span class="skill">JavaScript<i class="val">56%</i></span> </div> </div> <div class="progress skill-bar"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"> <span class="skill">jQuery<i class="val">65%</i></span> </div> </div> <div class="progress skill-bar"> <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> <span class="skill">PHP/MySQL<i class="val">70%</i></span> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('.progress .progress-bar').css("width", function() { return $(this).attr("aria-valuenow") + "%"; } ) }); </script> </body> </html>
×
Close
Animated Bootstrap Progress Bars, Free Time Learning, Bootstrap 3 Snippets
Sample Data
