Skip to content

Instantly share code, notes, and snippets.

@nhumphrey2

nhumphrey2/gist:edd3edf98ee26caa15cdb371ed34327f

Created May 12, 2016 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nhumphrey2/edd3edf98ee26caa15cdb371ed34327f to your computer and use it in GitHub Desktop.
Save nhumphrey2/edd3edf98ee26caa15cdb371ed34327f to your computer and use it in GitHub Desktop.
Download ZIP
Complete uncompressed Animated Skills Bar
Raw
gistfile1.txt
<!DOCTYPE html>
<html><h3>My Skills Bar</h3><div class="skillbar clearfix " data-percent="99%"><div class="skillbar-title" style="background: #00BFFF;"><span>Wordpress</span></div><div class="skillbar-bar" style="background: #00e600;"></div><div class="skill-bar-percent">90%</div></div><div class="skillbar clearfix " data-percent="99%"><div class="skillbar-title" style="background: #FFD700;"><span>Google Analytics</span></div><div class="skillbar-bar" style="background: #00e600;"></div><div class="skill-bar-percent">99%</div></div><style>.skillbar{position:relative;display:block;margin-bottom:15px;width:100%;background:#eee;height:35px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width, background-color;-moz-transition-property:width, background-color;-ms-transition-property:width, background-color;-o-transition-property:width, background-color;transition-property:width, background-color;}.skillbar-title{position:absolute;top:0;left:0;font-weight:bold;font-size:13px;color:#fff;background:#000000;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}.skillbar-title span{display:block;background:rgba(0, 0, 0, 0.1);padding:0 20px;height:35px;line-height:35px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}.skillbar-bar{height:35px;width:0px;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:35px;line-height:35px;color:#444;color:rgba(0, 0, 0, 0.4);}</style><script>jQuery('.skillbar').each(function(){jQuery(this).find('.skillbar-bar').animate({width:jQuery(this).attr('data-percent')},6000);});</script>
<head>
<title></title>
</head>
<body>
<div class="skillbar clearfix" data-percent="85%">
<div class="skillbar-title" style="background: #FF4500;">
<span>HTML5</span>
</div>
<div class="skillbar-bar" style="background: #00e600;"></div>
<div class="skill-bar-percent">
85%
</div>
</div>
<div class="skillbar clearfix" data-percent="65%">
<div class="skillbar-title" style="background: #c0c0c0;">
<span>CSS3</span>
</div>
<div class="skillbar-bar" style="background: #00e600;"></div>
<div class="skill-bar-percent">
85%
</div>
</div>
<div class="skillbar clearfix" data-percent="85%">
<div class="skillbar-title" style="background: #00008B;">
<span>SEO</span>
</div>
<div class="skillbar-bar" style="background: #00e600;"></div>
<div class="skill-bar-percent">
90%
</div>
</div>
<div class="skillbar clearfix" data-percent="30%">
<div class="skillbar-title" style="background: #000000;">
<span>jQuery</span>
</div>
<div class="skillbar-bar" style="background: #00e600;"></div>
<div class="skill-bar-percent">
30%
</div>
</div>
<style>
.skillbar{position:relative;display:block;margin-bottom:15px;width:100%;background:#eee;height:35px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width, background-color;-moz-transition-property:width, background-color;-ms-transition-property:width, background-color;-o-transition-property:width, background-color;transition-property:width, background-color;}.skillbar-title{position:absolute;top:0;left:0;font-weight:bold;font-size:13px;color:#F8F8FF;background:#6adcfa;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}.skillbar-title span{display:block;background:rgba(0, 0, 0, 0.1);padding:0 20px;height:35px;line-height:35px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}.skillbar-bar{height:35px;width:0px;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:35px;line-height:35px;color:#444;color:rgba(0, 0, 0, 0.4);}
</style>
<script>
jQuery('.skillbar').each(function(){jQuery(this).find('.skillbar-bar').animate({width:jQuery(this).attr('data-percent')},6000);});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment