.shimmer.dark { --shimmer-background: rgba(255, 255, 255, 0.1); --shimmer: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100% ); } .shimmer { --shimmer-background: rgba(217, 217, 217, 0.5); --shimmer: 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% ); background-color: var(--shimmer-background); position: relative; overflow: hidden; border-radius: 4px; min-height: 1em; min-width: 2ch; } .shimmer::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: var(--shimmer); animation: shimmer 3s infinite; content: ""; } @keyframes shimmer { 100% { transform: translateX(100%); } }