.shard{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 100px; height: 100px; background-color: #ff69b4; box-shadow: 0 0 10px #ff69b4; animation: shard-assemble 3s linear forwards; animation-delay: 0.2s; animation-delay: 0.4s;animation-delay: 0.6s; .shard::before{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border: 1px solid #fff; animation: shimmer 1s ease-in-out infinite; animation-delay: 0; .shard::before:nth-child(2){ animation-delay: 0.3s; .shard::after{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border: 1px solid #333; animation: loading-animation 1 linear infinite; .loading-element::before{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border: 10px solid transparent; border-top: 10px solid #ff69b4; .loading-element{ position: relative; width: 300px; height: 200px; border-radius: 50%; background-color: #333; } .animation-container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; aspect-ratio: 9/16;min-height: 100vh; }