<template>
    <div class="cf-player__loader"></div>
</template>

<style>
.cf-player__loader {
    width: 25px;
    height: 25px;
    --c: no-repeat linear-gradient(#000 0 0);
    background:
        var(--c) 0%   50%,
        var(--c) 50%  50%,
        var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: l1 1s infinite linear;
}

.cf-player--dark .cf-player__loader {
    --c: no-repeat linear-gradient(#FFF 0 0);
}

@keyframes l1 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    33% {background-size: 20% 10% ,20% 100%,20% 100%}
    50% {background-size: 20% 100%,20% 10% ,20% 100%}
    66% {background-size: 20% 100%,20% 100%,20% 10% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}
</style>
