SOmething fun, something simple. I know there are lots of way to do this; however this seems to be the most performant thus far.
@keyframes loading-header {
0% {
color: violet;
}
17% {
color: indigo;
}
34% {
color: blue;
}
51% {
color: green;
}
68% {
color: yellow;
}
84% {
color: orange;
}
100% {
color: red;
}
}
# view.loading>.ui.segment .ui.header {
position: fixed;
top: 0.420rem;
width: 100%;
height: 100%;
margin: 0;
opacity: 0.840;
font-weight: bold;
-webkit-text-stroke-width: 0.420rem;
-webkit-text-stroke-color: rgba(253, 0, 166, 0.420);
animation: loading-header .840s cubic-bezier(1, 0, 0.000001, 1) infinite !important;
}