*{margin: 0px;padding:0px;}

.wrapper {height: 60px; display: flex; justify-content: center; align-items: center; background-color: #FFF}
.checkmark__circle {stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #35c565; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}
.checkmark {width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 2; stroke: #35c565; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #35c565; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}
.checkmark__check {transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}

@keyframes stroke {
  100% {stroke-dashoffset: 0}
}

@keyframes scale {
  0%, 100% {transform: none}
  50% {transform: scale3d(1.1, 1.1, 1)}
}

@keyframes fill {
  100% {box-shadow: inset 0px 0px 0px 30px #FFF}
}