<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery Responsive Animated Bar Chart (Front-End Skills).</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #1F1E24;
height: 200px;
font-family: "Open Sans", sans-serif;
}
.wrapper {
margin: 0 auto;
width: 90%;
margin-top: 15px;
}
.bar {
position: relative;
width: 100%;
height: 48px;
background: rgba(255, 255, 255, 0.1);
margin-bottom: 1.5rem;
border-radius: 5px;
}
.bar .bar-info {
border-radius: 5px;
padding: 0.75rem;
background: #fd7473;
color: white;
width: 10%;
position: relative;
height: 24px;
transition: width 3.3s ease-in-out;
}
.bar .bar-info .percent {
float: right;
}
.bar .bar-info.html {
background: linear-gradient(#fd7473, #FC688E), #fd7473;
}
.bar .bar-info.css {
background: linear-gradient(#fec951, #FCAD44), #fec951;
}
.bar .bar-info.js {
background: linear-gradient(#47b8e0, #28BEFA), #47b8e0;
}
.bar .bar-info.ps {
background: linear-gradient(#9f68d0, #BB68D0), #9f68d0;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<body>
<div class='wrapper'>
<div class='bar'>
<div class='bar-info html' data-total='95'>
HTML
<span class='percent'>95</span>
</div>
</div>
<div class='bar'>
<div class='bar-info css' data-total='95'>
CSS
<span class='percent'>95</span>
</div>
</div>
<div class='bar'>
<div class='bar-info js' data-total='90'>
JavaScript
<span class='percent'>90</span>
</div>
</div>
<div class='bar'>
<div class='bar-info ps' data-total='85'>
Photoshop
<span class='percent'>85</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</body>
<script id="rendered-js" >
// When the DOM is loaded and ready, let's do some shit!
$(document).ready(function () {
function skillSet() {
// Iterate over each element w/ a class of
// bar-info, storing the value of data-total
// in a variable. Using jQuery's CSS method,
// dynamically update the width of each bar.
$('.bar-info').each(function () {
total = $(this).data("total");
$(this).css("width", total + "%");
});
// Iterate over each element w/ the class percent. Using
// jQuery's $(this) will allow us to interact w/ each specific
// object in the loop. Then use jQuery's super awesome animate method
// to implement a counter on each .percent element, which will "count"
// up incrementally until it reaches the number inside the percent span,
// aka it's "ceiling".
$('.percent').each(function () {
var $this = $(this);
$({
Counter: 10 }).
animate({
Counter: $this.text() },
{
duration: 3000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter) + "%");
} });
});
};
// Invoke our skillSet function inside a setTimeout,
// to create a short delay before the animation begins.
setTimeout(skillSet, 1000);
});
</script>
</body>
</html>
Comments
Post a Comment