LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Automatic reverse color

using mix-blend-mode

Loading…
Loading…
CSS
.loader {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 55px;
  margin: 2em auto;
  background: #F1F2F3;
}
.load-pct {
  text-align: center;
  line-height: 55px;
  font-weight: bold;
  color: #2699BF;
  text-shadow: 1px 1px 1px #fff;
}
.load-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  /* The opposite color of my visible blue one*/
  background: #CB5934;
  -webkit-animation: loading 7s infinite;
          animation: loading 7s infinite;
  mix-blend-mode: difference;
}



/* Big loader text */
.loader-text {
  height: auto;
  width: auto;
  display: inline-block;
  background: #FFF;
}
.loader-text .load-pct {
  font-size: 20vw;
  letter-spacing: 0;
  font-family: impact;
  text-transform: uppercase;
  line-height: 1.4;
}
.loader-text .load-bar {
  mix-blend-mode: lighten;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: .05em;
  word-spacing: .05em;
  text-align: center;
}
h1 {
  margin-top: 1.5em;
  color: #2699BF;
}
h2 {
  margin-bottom: 3em;
  color: #666;
}

@-webkit-keyframes loading {
  0% {
    right: 100%;
  }
  75%, 100% {
    right: 0;
  }
}

@keyframes loading {
  0% {
    right: 100%;
  }
  75%, 100% {
    right: 0;
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Reverse automatically Text color based on background-color with only CSS using mix-blend-mode.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID