loadingText

by jpeter06

HTML

<div class="initloadingtext">RIE-CAN</div>

CSS

html,body{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  overflow:hidden;
  background-color: #e2e2e2;
}

.initloadingtext{
  font-size: 17vw;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans Pro', sans-serif;
  background-size: cover;
  color: transparent;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: initloadingtextkeyframes;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #cbcbcb 8%, #b0b0b0 38%, #cbcbcb 54%);
  background-size: 1000px 640px;
  position: relative;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes initloadingtextkeyframes{
    0%{    background-position: -468px 0    }
    100%{  background-position: 468px 0    }
}