JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id="scaffold" class="test">#1241231234</div>

CSS

@keyframes animatedBackground {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

    #scaffold { 
        font-family: var(--font-fixed, consolas); 
        opacity: .5; 
        display: block;
        line-height: 28px;
        height: 28px;
        
background-position: 0px 0px;
background-size: 400% 400%;
animation: animatedBackground 6s ease infinite;
        padding: 0 .4em;
        border-radius: 2px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        #scaffold.test {
            color: var(--job-block-colour);
            
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rebeccapurple 50%,rgba(255,255,255,0) 100%);

        }