*{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;background-color:#edf1f4;height:100vh;overflow-x:hidden}.loader{display:flex;flex-direction:row}.loader__item{margin:20px;position:relative;width:40px;border-radius:40px;height:200px;background-image:linear-gradient(to bottom, rgba(0,0,0,0.05), #edf1f4);border:2px solid #edf1f4;overflow:hidden;box-shadow:15px 15px 20px rgba(0,0,0,0.1),-15px -15px 20px #fff,inset -5px -5px 5px rgba(255,255,255,0.5),inset 5px 5px 5px rgba(255,255,255,0.05)}.loader__item::before{content:'';position:absolute;z-index:9;top:0;left:0;width:100%;height:100%;border-radius:40px;box-shadow:15px 15px 20px rgba(0,0,0,0.1),-15px -15px 20px #fff,inset -5px -5px 5px rgba(255,255,255,0.5),inset 5px 5px 5px rgba(255,255,255,0.05)}.loader__item::after{content:'';position:absolute;top:0;left:0;width:36px;height:36px;background-color:#fff;border-radius:50%;box-shadow:inset -5px -5px 5px rgba(0,0,0,0.2),0 420px 0 400px #2196f3;animation:animate 2.5s ease-in-out infinite;transform:translateY(160px);animation-delay:calc(-0.155s * var(--i))}@keyframes animate{0%{transform:translateY(160px);filter:hue-rotate(180deg)}50%{transform:translateY(0)}100%{transform:translateY(160px);filter:hue-rotate(0deg)}}