Загрузчик CSS-анимации меняет цвет шрифта ⇐ Html

[Anonymous]

Это исходный код css-загрузчиков, который работает нормально.

Код: Выделить всё

.loader {
width: fit-content;
font-weight: bold;
font-family: monospace;
font-size: 30px;
background: linear-gradient(90deg, #000 50%, #0000 0) right/200% 100%;
animation: l21 3s infinite linear;
}

.loader::before {
content: "Loading...";
color: #0000;
padding: 0 5px;
background: inherit;
background-image: linear-gradient(90deg, #fff 50%, #000 0);
-webkit-background-clip: text;
background-clip: text;
}

@keyframes l21 {
100% {
background-position: left
}
}

Код: Выделить всё

Но проблема в том, что он использует фиксированное текстовое содержимое: «Загрузка...»; и я хочу, чтобы текст свободно устанавливался в Любой текст. Я пробовал ниже, но цвет шрифта не меняется, как указано выше

Код: Выделить всё

.loader {
width: fit-content;
font-weight: bold;
font-family: monospace;
font-size: 30px;
background: linear-gradient(90deg, #000 50%, #0000 0) right/200% 100%;
animation: l21 2s infinite linear;
}

@keyframes l21 {
100% {
background-position: left;
color: #fff
}
}

Код: Выделить всё

Any Text

Подробнее здесь: https://stackoverflow.com/questions/798 ... font-color