Created
October 21, 2015 03:07
-
-
Save anonymous/3b3187b25303a0f402d4 to your computer and use it in GitHub Desktop.
JS Bin check mark success animation // source https://jsbin.com/sovase
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="check mark success animation"> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
/* animations */ | |
@-webkit-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-ms-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-webkit-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@-ms-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
/* other styles */ | |
/* .svg svg { | |
display: none | |
} | |
*/ | |
.inlinesvg .svg svg { | |
display: inline | |
} | |
/* .svg img { | |
display: none | |
} */ | |
.icon--order-success svg path { | |
-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards; | |
animation: checkmark 0.25s ease-in-out 0.7s backwards | |
} | |
.icon--order-success svg circle { | |
-webkit-animation: checkmark-circle 0.6s ease-in-out backwards; | |
animation: checkmark-circle 0.6s ease-in-out backwards | |
} | |
</style> | |
</head> | |
<body> | |
<div class="icon icon--order-success svg"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="72px" height="72px"> | |
<g fill="none" stroke="#8EC343" stroke-width="2"> | |
<circle cx="36" cy="36" r="35" style="stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;"></circle> | |
<path d="M17.417,37.778l9.93,9.909l25.444-25.393" style="stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;"></path> | |
</g> | |
</svg> | |
</div> | |
<script id="jsbin-source-css" type="text/css">/* animations */ | |
@-webkit-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-ms-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-webkit-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@-ms-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
/* other styles */ | |
/* .svg svg { | |
display: none | |
} | |
*/ | |
.inlinesvg .svg svg { | |
display: inline | |
} | |
/* .svg img { | |
display: none | |
} */ | |
.icon--order-success svg path { | |
-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards; | |
animation: checkmark 0.25s ease-in-out 0.7s backwards | |
} | |
.icon--order-success svg circle { | |
-webkit-animation: checkmark-circle 0.6s ease-in-out backwards; | |
animation: checkmark-circle 0.6s ease-in-out backwards | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* animations */ | |
@-webkit-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-ms-keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@keyframes checkmark { | |
0% { | |
stroke-dashoffset: 50px | |
} | |
100% { | |
stroke-dashoffset: 0 | |
} | |
} | |
@-webkit-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@-ms-keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
@keyframes checkmark-circle { | |
0% { | |
stroke-dashoffset: 240px | |
} | |
100% { | |
stroke-dashoffset: 480px | |
} | |
} | |
/* other styles */ | |
/* .svg svg { | |
display: none | |
} | |
*/ | |
.inlinesvg .svg svg { | |
display: inline | |
} | |
/* .svg img { | |
display: none | |
} */ | |
.icon--order-success svg path { | |
-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards; | |
animation: checkmark 0.25s ease-in-out 0.7s backwards | |
} | |
.icon--order-success svg circle { | |
-webkit-animation: checkmark-circle 0.6s ease-in-out backwards; | |
animation: checkmark-circle 0.6s ease-in-out backwards | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment