Decode,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
height: 50px;
width: 50px;
background: #336699;
cursor: pointer;
border-radius: 5px;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.body.children[0], direction;
div.dataset.width = Math.round(div.offsetWidth / document.documentElement.clientWidth * 100);
div.innerHTML = div.dataset.width + '%';
div.onclick = function() {
foo(this, 75);
};
function foo(elem, num) {
if (elem.isAnimate) return;
elem.isAnimate = true;
var i = elem.style.width != (num+'%') ? (direction = 1,+elem.dataset.width ): (direction = -1,num );
function bar() {
elem.style.width = elem.innerHTML = i + '%';
i += direction;
(i <= num && i >= +elem.dataset.width) ? requestAnimationFrame(bar) : elem.isAnimate = null;
}
requestAnimationFrame(bar);
}
</script>
</body>
</html>