Skip to content

Instantly share code, notes, and snippets.

@taketin

taketin/progress-keyframe-anim.html

Created April 2, 2012 17:27
Show Gist options
  • Save taketin/2285437 to your computer and use it in GitHub Desktop.
Save taketin/2285437 to your computer and use it in GitHub Desktop.
Download ZIP
Easy ProgressBar Animation Snipet.
Raw
progress-keyframe-anim.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dynamic-keyframe-anim-sanple</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
(function() {
var anim_number = 1;
$("#progress").click(function() {
var progress_val = 10;
var fact_width = $("#progress-bar").css("width");
fact_width = fact_width.replace("px", "");
if (fact_width >= 99) { return; }
var target_width = parseInt(fact_width) + progress_val;
// added keyframe-animation
var progress_anim = [
"0% {width:" + fact_width + "px}",
"100% {width:" + target_width + "px}"
];
var cssAnimation = document.createElement("style");
cssAnimation.id = "progress-anim-style";
cssAnimation.type = "text/css";
var progress_rules = document.createTextNode("@-webkit-keyframes progress-anim" + anim_number + " {" + progress_anim.join(" ") + "}");
cssAnimation.appendChild(progress_rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
// animation start
$("#progress-bar").css("webkitAnimation", "progress-anim" + anim_number + " 0.5s ease-out");
$("#progress-bar").bind("webkitAnimationEnd", function() {
$("#progress-bar").css("width", target_width + "px");
});
anim_number += 1;
});
}());
});
</script>
</head>
<body>
<div id="progress-box" style="border:1px solid blue; width:100px; height:10px;">
<div id="progress-bar" style="background-color:red; width: 0px; height:10px;"></div>
</div>
<input value="progress" type="button" id="progress" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment