Loading Animation

by Berat Emre Nebioğlu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="spinning">
<i class="fa fa-refresh fa-spin"></i>
    <div class ="Text">Loading <div class="animated">...</div> </div>
</div>

SCSS

.spinning{
    position:fixed;
    top:50%;
    left:50%;
}
i.fa-refresh {
    font-size: 5em;
}
.Text{
  font-weight:bold;   
}
.animated {
    display: inline-block;
    overflow: hidden;
    line-height: 1em;
}

JavaScript

/* sayfa gelirken böyle bir animasyon kullanılması iyi olur diye düşünmüş. O yüzden böyle bir çalışma yaptım. */


var $animated = $('.animated');
$animated.data('max-width', $animated.width()).data('step', 3);

var interval = setInterval(function () {
    var maxWidth = $animated.data('max-width');
    var step = $animated.data('step');
    
    if (step === 3) {
        $animated.width(maxWidth * 1/3);
    } else if (step === 2) {
        $animated.width(maxWidth);
    } else {
        $animated.width(maxWidth * 2/3);
    }
    
    $animated.data('step', step % 3 + 1);
}, 800);

//cancel me later
//clearInterval(interval);