<div class='wrapper'>
    <svg class='example' viewBox='0 0 100 100'>
        <rect id='loader-1' x='10' y='10' height='80' width='80' fill='none' stroke='#fff' stroke-width='5' stroke-dasharray='80 240' stroke-dashoffset='0' stroke-linecap='round' />
        <path id='ok' d='m50 90 L 10 90 L 10 50 L 50 90 L 90 10' stroke='#fff' fill='none' stroke-width='5' stroke-linecap='round' stroke-dasharray='142 200' stroke-dashoffset='62' display='none' />
    </svg>
</div>
body {
    background: #260F26;
}

.wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.example {
    height: 5rem;
    width: 5rem;
    background: #361F36;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}
View Compiled
let loadingCompleted = false;

let finish = anime({
    targets: '#ok',
    strokeDashoffset: -84,
    easing: 'easeInOutQuint',
    duration: 1000,
    autoplay: false
});

let animation = anime({
    targets: '#loader-1',
    strokeDashoffset: -320,
    easing: 'linear',
    duration: 1000,
    loop: true,
    run: (anim) => {
        if (loadingCompleted && anim.progress >= 60 && anim.progress <= 62) {
            anim.pause();
            document.getElementById('loader-1').style.display = 'none';
            document.getElementById('ok').style.display = 'block';
            finish.play();
        }
    }
});

setTimeout(() => {
    loadingCompleted = true;
}, 1000);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js