body { margin: 0; display: grid; place-items: center; height: 100vh; background: url('https://i.sstatic.net/m9NKc.png') no-repeat, #fcfcff; }
.loader {
/* Размер и позиции кругов */
--radius: -0.344em; --size90: 0.689em; --size65: 0.496em; --size62: 0.472em;
/* Нет смысла менять (смотри 'font-size' ниже) */
height: 1em; width: 1em;
/* Если изменить радиус скругления углов (например, на '40%'
или '10% 50%'), то могут получиться интересные формы. */
border-radius: 50%;
/* Базовый размер (от него всё пляшет) */
font-size: 45vh;
/* Далее сама анимация */
animation: loader 1s infinite;
}
@keyframes loader {
0%, 100% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) black, var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.25), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.4), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.55), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.7), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.85); }
12.5% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.85), var(--size65) calc(var(--size62) * -1) 0 var(--radius) black, var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.1), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.25), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.4), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.55), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.7); }
25% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.7), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.85), var(--size90) 0px 0 var(--radius) black, var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.1), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.25), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.4), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.55); }
37.5% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.55), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.7), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.85), var(--size65) var(--size62) 0 var(--radius) black, 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.25), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.4); }
50% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.4), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.55), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.7), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.85), 0px var(--size90) 0 var(--radius) black, calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.25); }
62.5% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.25), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.4), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.55), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.7), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.85), calc(var(--size65) * -1) var(--size62) 0 var(--radius) black, calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.1), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1); }
75% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.25), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.4), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.55), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.7), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.85), calc(var(--size90) * -1) 0px 0 var(--radius) black, calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1); }
87.5% { box-shadow: 0px calc(var(--size90) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size65) calc(var(--size62) * -1) 0 var(--radius) rgba(0, 0, 0, 0.1), var(--size90) 0px 0 var(--radius) rgba(0, 0, 0, 0.25), var(--size65) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.4), 0px var(--size90) 0 var(--radius) rgba(0, 0, 0, 0.55), calc(var(--size65) * -1) var(--size62) 0 var(--radius) rgba(0, 0, 0, 0.7), calc(var(--size90) * -1) 0px 0 var(--radius) rgba(0, 0, 0, 0.85), calc(var(--size65) * -1) calc(var(--size62) * -1) 0 var(--radius) black; }
}
<div class="loader"></div>