A Pen by Kaushalya Mandaliya.

index.html

<div class="loading-line"></div>
<div class="km"><a href="http://seebeetee.com">By Kaushalya Mandaliya</a></div>

Loading-like-Youtube(In-Sass).markdown

Loading like Youtube(In Sass)

Just got an idea about making something like youtube-loader. And finally made this.

A Pen by Kaushalya Mandaliya on CodePen.

License.

script.js

/*
 * Loading like Youtube(In Sass)
 * 
 * 2014 by Kaushalya Mandaliya.
 * http://seebeetee.com | https://twitter.com/kmandalwala
 */

style.scss

@import "compass";
$height-of-loading-line: 0.3em;
$animation-duration: 5s;
$background-of-the-line: #f07719;


/* .loading-line starts :D */

.loading-line {  
  height: $height-of-loading-line;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  
  // @include section
  @include animation(loading $animation-duration linear);
  @include transition(1s all ease-in-out);
}


@include keyframes(loading) {
  0% {
    background: $background-of-the-line;
    width: 0%;    
  }
  
  30% {
    background: $background-of-the-line;
    width: 20%;
  }
  
  55% {
    background: $background-of-the-line;
    width: 55%;
  }
  
  60% {
    background: $background-of-the-line;
    width: 62%;
  }
  
  75% {
    background: $background-of-the-line;
    width: 75%;
  }
  
  88% {
    background: $background-of-the-line;
    width: 80%;
  }
  
  100% {
    background: $background-of-the-line;
  }
}


/* By Kaushalya Mandaliya*/
.km {
  bottom: 0.3em;
  color: #f07719;
  font: bold 1em 'Calibri', helvetica;
  position: fixed;  
  right: 0.3em;
  
  a {
    color: inherit;
    text-decoration: none;
  }  
}