.skeleton-wrapper { // max-width: 600px; display: flex; margin: 0 auto; width: 100%; .asset-name { width: 40%; height: 10px; } .asset { width: 100%; height: 100%; } .skeleton { background: var(--background-color-gray); border-radius: 8px; position: relative; overflow: hidden; &::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%); animation: shimmer 1.5s infinite; } } .skeleton-header { margin-bottom: 20px; .skeleton-title { width: 100%; height: 25px; margin-bottom: 12px; } .skeleton-subtitle { width: 100%; height: 4px; } } .skeleton-content { display: flex; flex-direction: column; gap: 16px; .skeleton-card { width: 100%; height: 15px; } } } @keyframes shimmer { 100% { transform: translateX(100%); } }