Created
August 25, 2015 23:00
-
-
Save anonymous/30aa20834d52bf7adedc 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