.process {

}

.process svg {
    display: block;
}
.process .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}
.process .path.circle {
    -webkit-animation: dash-line 0.9s ease-in-out;
    animation: dash-line 0.9s ease-in-out;
}
.process .path.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash-line 0.9s 0.35s ease-in-out forwards;
    animation: dash-line 0.9s 0.35s ease-in-out forwards;
}
.process .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-line {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes dash-line {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}
@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}