<svg class="done" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="circle" cx="26" cy="26" r="25" fill="none" />
    <path class="check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>

<svg class="error" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="circle" cx="26" cy="26" r="25" fill="none" />
    <path class="line" fill="none" d="M17.36,34.736l17.368-17.472" />
    <path class="line" fill="none" d="M34.78,34.684L17.309,17.316" />
</svg>

.done {
     50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    stroke- 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill-green 0.5s ease-in-out 0.5s forwards, scale 0.3s ease-in-out 0.7s both;
}
.done .circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke- 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.done .check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.7s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.error {
     50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    stroke- 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px 0px 0px #e74c3c;
    animation: fill-red 0.5s ease-in-out 0.5s forwards, scale 0.3s ease-in-out 0.7s both;
}
.error .circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke- 2;
    stroke-miterlimit: 10;
    stroke: #e74c3c;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.error .line {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.7s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.error .line:nth-child(1) {
    animation-delay: 1s;
}
.error .line:nth-child(2) {
    /* Animate */
    
    animation-delay: 0.7s;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.2, 1.2, 1);
    }
    80% {
        transform: scale3d(0.8, 0.8, 1);
    }
}
@keyframes fill-green {
    100% {
        box-shadow: inset 0px 0px 0px 25px #7ac142;
    }
}
@keyframes fill-red {
    100% {
        box-shadow: inset 0px 0px 0px 25px #e74c3c;
    }
}