<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' />
    </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
anime({
    targets: '#loader-1',
    strokeDashoffset: -320,
    easing: 'linear',
    duration: 1000,
    loop: true
});
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