Merhabalar, bu yazımda sizler için CSS İle Loading yani yükleniyor animasyonundan bahsedeceğim.Eğer sizde böyle birşey yapmak istiyorsanız ve ya bu tarz bir sistemi gif kullanarak yapmışsanız onları silmenizi tavsiye ederim.Anlatımını yapacağım bu sistem gif ile yapılan sistemlerden daha kaliteli ve daha hoş görünüme sahiptir. Bu animasyonumuzu Harold Soto adında bir kişi yapmış.İyi ki de yapmış.Animasyon örneklerimizi ise Harold dostumuzun profilinden görebilirsiniz.(Örnekler) İlk olarak hemen örnelerden hoşunuzda gideni seçin.Benim hoşuma giden 3 balls olan.O yüzden anlatımımda onu kullanacağm. İlk olarak html kodlarımızın arasına aşağıdaki kodumuzu ekleyelim.

 <div class="sp sp-3balls"></div>

Gerekli eklemelerimizi yaptıktan sonra ise gerekli CSS kodlarımızı temamıza ekleyelim

/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after {
border-radius: 50%;
background-color: $spCol;
width: 18px;
height: 18px;
transform-origin: center center;
display: inline-block;
}
.sp-3balls {
position: relative;
background-color: rgba($spCol,1);
opacity: 1;
-webkit-animation: spScaleAlpha 1s infinite linear;
animation: spScaleAlpha 1s infinite linear;
}
.sp-3balls:before, .sp-3balls:after {
content: '';
position: relative;
opacity: 0.25;
}
.sp-3balls:before {
left: 30px;
top: 0px;
-webkit-animation: spScaleAlphaBefore 1s infinite linear;
animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls:after {
left: -30px;
top: -23px;
-webkit-animation: spScaleAlphaAfter 1s infinite linear;
animation: spScaleAlphaAfter 1s infinite linear;
}

Şimdi ise animasyon kodlarımızı ekleyerek işlemimizi bitirelim.

@-webkit-keyframes spScaleAlpha {
0% { opacity: 1; }
33% { opacity: 0.25; }
66% { opacity: 0.25; }
100% { opacity: 1; }
}
@keyframes spScaleAlpha {
0% { opacity: 1; }
33% {  opacity: 0.25; }
66% { opacity: 0.25; }
100% {  opacity: 1; }
}
@-webkit-keyframes spScaleAlphaBefore {
0% { opacity: 0.25; }
33% { opacity: 1; }
66% { opacity: 0.25; }
}
@keyframes spScaleAlphaBefore {
0% { opacity: 0.25; }
33% { opacity: 1; }
66% { opacity: 0.25; }
}
@-webkit-keyframes spScaleAlphaAfter {
33% { opacity: 0.25; }
66% { opacity: 1; }
100% { opacity: 0.25; }
}
@keyframes spScaleAlphaAfter {
33% { opacity: 0.25; }
66% { opacity: 1; }
100% { opacity: 0.25; }
}

İşlemimiz bu kadar.Adımları doğru yaptığınız sürece çalışacaktır.