Blend mode CRT effect loader

blend-mode-crt-effect-loader.markdown

Blend mode CRT effect loader

A Pen by Zed Dash on CodePen.

License.

index.html

<div class="text">
   <div class="r">Loading...</div>
   <div class="g">Loading...</div>
   <div class="b">Loading...</div>
</div>

style.scss

body {
   font-family: 'Source Sans Pro', sans-serif;
   background-color:#323133;
   &:after {
      content: '';
      position: absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      z-index:1000;
      background: repeating-linear-gradient(0deg, #111 0px, #111 1px, transparent 2px, transparent 5px);
      background-size:100% 5px;
      animation: lines 2s ease-out infinite;
      opacity:0.3;
      mix-blend-mode: color-burn;
      pointer-events: none;
   }
   .text, .text >* {
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
   }
   .text {
      >* {
         font-size:80px;
         animation: giggle 1s ease infinite;
         mix-blend-mode: difference;
      }
      .r {
         color:#f00;
         left:-0.5px;
      }
      .g {
         color:#0f0;
         animation-delay:-0.67s;
      }
      .b {
         color:#00f;
         animation-delay:-0.33s;
         left:0.5px;
      }
   }
}

@keyframes giggle {
   0%, 100% {
      transform:translate(-50%,-50%) translateY(-2px);
   }
   50% {
      transform:translate(-50%,-50%) translateY(2px);
   }
}
@keyframes lines {
   0% {
      background-position:0px 0px;
   }
   100% {
      background-position:0px 25px;
   }
}

styles

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />