Güzel CSS3 Loader - Audio Effect

[abdullahozturk]

Öncelikle herkese hayırlı günler. Sizler için kodlar ararken bir site dikkatimi çekti ve oradaki kodların bazılarına bakmaya karar verdim. 1 tane güzel bir kod buldum ve sizinle paylaşmaya karar verdim. Umarım beğenirsiniz ve teşekkürler butonuna basmayı unutmassınız :)

Öncelikle demo:

PHP Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/boris-graeff/full/bdBXmj/ 


"Bu kodları nereye ekleyeceğim?" diye sorarsanız, yorum'da sorun ben cevaplarım zamanım kısıtlı.

HTML kodları;

PHP Kod: Tümünü Seç Tümünü Kopyala

#loader
  ul
    li
    li
    li
    li
    li
    li 


CSS Kodları;

PHP Kod: Tümünü Seç Tümünü Kopyala

body {
   background : #FC0;
}

#loader{
 position:fixed;
 margin: auto;
 left:0;
 right:0;
 top:50%;
 width : 90px;
  
  ul {
    margin : 0;
    list-style:none;
    width:90px;
  height:65px;
    position : relative;
    padding : 0;
    height:10px;
    
    li {
      position : absolute;
      width:2px;
      height : 0;
      background-color: #000;
      bottom : 0;
    }
  }
}
  

@keyframes sequence1 {
 0%{ height: 10px; }
 50%{ height:50px; }
 100%{ height: 10px; }
}

@keyframes sequence2 {
 0%{ height: 20px; }
 50%{ height: 65px; }
 100%{ height: 20px; }
}

#loader li:nth-child(1){
  left : 0;
  animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2){
  left : 15px;
  animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3){
  left : 30px;
  animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4){
  left : 45px;
  animation: sequence2 1s ease-in infinite 0.3s;
}

#loader li:nth-child(5){
  left : 60px;
  animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6){
  left : 75px;
  animation: sequence2 1s ease infinite 0.5s;
} 


Beğendiyseniz teşekkür butonuna basmayı unutmayalım :)

[Ufufuk]

Güzelmiş beğendim ama pek bir işe yaramaz :) 

[abdullahozturk]

Güzelmiş beğendim ama pek bir işe yaramaz :) 

Bende öyle düşündüm ancak müzik forumlarında/sitelerinde işe yarayabilir.
Teşekkür için sağol.