Der CSS-Animationslader ändert die Schriftfarbe ⇐ HTML

[Anonymous]

Dies ist Originalcode von CSS-Loadern, der einwandfrei funktioniert

Code: Select all

.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
}
}

Code: Select all

Aber das Problem ist, dass es einen festen Textinhalt verwendet: „Loading...“; und was ich möchte, ist, den Text frei in Jedem Text festzulegen. Ich habe es unten versucht, aber die Schriftfarbe ändert sich nicht wie oben

Code: Select all

.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
}
}

Code: Select all

Any Text