loaders

by Евгений

HTML

<div class="loader loader--infinity">
  <div class="loader__inner"></div>
</div>

<div class="loader--finity"></div>

<div class="loader--finity2"></div>

<div class="loader--finity3">
  <div class="loader__inner">
    <div class="loader__bg"></div>
  </div>
</div>

SCSS

.loader--infinity {
    height: 5px;
    position: relative;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 100px;
    .loader__inner {
      width: 50%;
      height: 100%;
      border-radius: 100px;
      position: absolute;
      top: 0;
      overflow: hidden;
      animation: loader--infinity 1.5s ease-in-out infinite;
      &:after {
        content: '';
        width: 200%;
        height: 100%;
        position: absolute;
        top: 0;
        background: linear-gradient(to right, #adc9e3 0%, #ffc4c4 100%);
//        background: linear-gradient(to right, red 0%, blue 100%);
        animation: loader--infinity__inner 1.5s ease-in-out infinite;
      }
    }
}
.loader--finity3 {
  margin: 10px 0;
  height: 5px;
  border-radius: 100px;
  overflow: hidden;
  .loader__inner {
    height: 100%;
    width: 80%;
    overflow: hidden;
    border-radius: 100px;
  }
  &:hover .loader__inner{
    animation: loader--finity3 3s linear;
  }
  .loader__bg {
    height: 100%;
    background: linear-gradient(to right, #adc9e3 0%, #ffc4c4 100%);
//    background: linear-gradient(to right, red 0%, blue 100%);
  }
}
.loader--finity2 {
    position: relative;
    height: 5px;
    overflow: hidden;
    margin: 10px 0;
    border-radius: 100px;
    &:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(to right, #adc9e3 0%, #ffc4c4 100%);
//      background: linear-gradient(to right, red 0%, blue 100%);
    }
    &:after{
        content:'';
        position:absolute;
        left:-60%; 
        top:0;
        border-radius:100px;
        width:100%; height:100%;
        box-shadow: 0px 0px 0px 2000px white;
    }
    &:hover:after {
       animation: loader--finity2 3s linear;
    }
}

.loader--finity {
  height: 5px;
  border-radius: 100px;
  background: linear-gradient(to right, #adc9e3 0%, #ffc4c4 100%);
//  background: linear-gradient(to right, red 0%,...

JavaScript

function setBGwidth(el) {
	if (!el) return;
  el.querySelector('.loader__bg').style.width = el.offsetWidth + 'px';
}
document.addEventListener('DOMContentLoaded', function() {
    var loader = document.querySelector('.loader--finity3');
    setBGwidth(loader);
	}
)