<div class="checkmark">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 161.2 161.2" enable-background="new 0 0 161.2 161.2" xml:space="preserve">
<path class="path" fill="none" stroke="#7DB0D5" stroke-miterlimit="10" d="M425.9,52.1L425.9,52.1c-2.2-2.6-6-2.6-8.3-0.1l-42.7,46.2l-14.3-16.4
c-2.3-2.7-6.2-2.7-8.6-0.1c-1.9,2.1-2,5.6-0.1,7.7l17.6,20.3c0.2,0.3,0.4,0.6,0.6,0.9c1.8,2,4.4,2.5,6.6,1.4c0.7-0.3,1.4-0.8,2-1.5
c0.3-0.3,0.5-0.6,0.7-0.9l46.3-50.1C427.7,57.5,427.7,54.2,425.9,52.1z"/>
<circle class="path" fill="none" stroke="#7DB0D5" stroke-width="4" stroke-miterlimit="10" cx="80.6" cy="80.6" r="62.1"/>
<polyline class="path" fill="none" stroke="#7DB0D5" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="113,52.8
74.1,108.4 48.2,86.4 "/>
<circle class="spin" fill="none" stroke="#7DB0D5" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12.2175,12.2175" cx="80.6" cy="80.6" r="73.9"/>
</svg>
<p>Good!</p>
</div>
xxxxxxxxxx
.checkmark {
width: 200px;
margin: 0 auto;
padding-top: 40px;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out;
animation: dash 2s ease-in-out;
}
.spin {
animation: spin 2s;
animation: spin 2s;
transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
p {
font-family: sans-serif;
color: pink;
font-size: 30px;
font-weight: bold;
margin: 20px auto;
text-align: center;
animation: text .5s linear .4s;
animation: text .4s linear .3s;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
@keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
}