Add loading/countdown animation for the skip button

[rlauuzo]

Propose adding a small loading/progress animation to the skip button to visually indicate Jellyfin’s automatic hide countdown (currently hardcoded to 8s).

Example CSS (proof-of-concept)

:root { --skip-hide-duration: 8s; }

.skip-button {
    padding: 0.75em 2.125em 0.75em 1.75em;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: white;
    flex-direction: row-reverse;
    transition: all 0.25s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.skip-button > *:last-child { margin-right: 0.5em; }

.skip-button:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #000 !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
}

@keyframes skipButtonLoading { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.skip-button:not(.skip-button-hidden):not(.no-transition) {
    background: linear-gradient(
        to right,
        rgba(76, 175, 80, 0.9) 0%,
        rgba(76, 175, 80, 0.9) 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 100%
    );
    background-size: 200% 100%;
    animation: skipButtonLoading var(--skip-hide-duration) linear forwards;
    will-change: background-position;
    transform: translateZ(0);
}

unkownvideo.mp4

[lscambo13]

This looks cool, though it looks a bit complex. I can consider it if the performance is is okay. I'll test it later.