Checkmark 2

Home » Components » Alerts » Checkmark 2

Checkmark 2


	
  	
svg {
	width: 60px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
}
.path.circle {
	-webkit-animation: dash 0.9s ease-in-out;
	animation: dash 0.9s ease-in-out;
}
.path.check {
	stroke-dashoffset: -100;
	-webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
	animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
@-webkit-keyframes dash-check {
	0% {
		stroke-dashoffset: -100;
	}
	100% {
		stroke-dashoffset: 900;
	}
}
@keyframes dash-check {
	0% {
		stroke-dashoffset: -100;
	}
	100% {
		stroke-dashoffset: 900;
	}
}