ChatGPT tinking-shiny

by Jens Kühn

HTML

<div class="thinking-shiny">Nachgedacht …</div>

CSS

body,
html {
  background-color: #212121;
  color: #fff;
  --text-secondary: #fff;
  --shimmer-contrast: rgba(0, 0, 0, 0.75);
}
.thinking-shiny{
  background: var(--text-secondary) -webkit-gradient(linear, 100% 0, 0 0, from(var(--text-secondary)), color-stop(.4, var(--shimmer-contrast)), color-stop(.6, var(--shimmer-contrast)), to(var(--text-secondary)));
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  color: transparent;
  animation-delay: .3s;
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
  animation-name: shiny-text;
}

@keyframes shiny-text {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 250% 0;
  }
}