Linkedin Loading Animation

index.html

<div class="container">
  <span class="fab fa-linkedin"></span>
  <div class="line">
    <div class="inner"></div>
  </div>
</div>

linkedin-loading-animation.markdown

Linkedin Loading Animation

A Pen by Tanmay Naik on CodePen.

License.

script.js

//Pure CSS!

style.scss

$width: 100px;
$height: 100px;

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f5f5f5;
}

.container{
  //background: #eaeaea;
  width: $width*2;
  height: $height*2;
  background-size: cover;
  vertical-align: middle;
  margin: 20% auto;
}

.fa-linkedin{
  display: block;
  font-size: 5em;
  text-align: center;
  color: #0077B5;
}

.line{
  height: 3px;
  width: 100%;
  background: #e8e8e8;
  margin-top: 30%;
  
  .inner{
    width: 100%;
    height: inherit;
    background: #0077B5;
    animation: slide 2s ease-in-out infinite;
  }
}

@keyframes slide{
  0%{
    transform-origin: left;
    transform: scalex(0.3);
  }
  //12.5%{
    //transform-origin: left;
    //transform: scalex(0.2);
  //}
  25%{
    transform-origin: left;
    transform: scalex(1);
  }
  26%{
    transform-origin: right;
    transform: scalex(1);
  }
  50%{
    transform-origin: right;
    transform: scalex(0.3);
  }
  //62.5%{
    //transform-origin: right;
    //transform: scalex(0.2);
  //}
  75%{
    transform-origin: right;
    transform: scalex(1);
  }
  76%{
    transform-origin: left;
    transform: scalex(1);
  }
  100%{
    transform-origin: left;
    transform: scalex(0.3);
  }
}