CSS だけで作るローディング画像⑤ - TYPE31【みんなの知識ちょっと便利帳】

CSS だけで作るローディング画像 ⑤
= Type 31 =
= 画像ファイルを用意する必要がありません =

CSS ⑤	《1》《2》《3》《4》《5》《6》《7》《8》《9》《10》《11》《12》《13》《14》《15》《16》《17》《18》《19》《20》《21》《22》《23》《24》《25》《26》《27》《28》《29》《30》《31》
スピードサイズ人気度透過処理 SVG WebFont CSS① CSS② CSS③ CSS④ CSS⑤ CSS⑥

画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
＊カラーサンプルはこちらが便利です。
DW で表示されるカラーネーム
大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。

《 Type 31 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.progress{
  position: relative;
  margin: 0 auto;
}
.progress span{
  transition: all 500ms ease;
  background: #4A72DA;
  box-shadow: 1px 2px 3px #999;
  height: 10px;
  width: 10px;  
  display: inline-block;
  border-radius: 10px;
  animation: wave 2s ease  infinite;
}  
.progress span:nth-child(1){  animation-delay: 0; }
.progress span:nth-child(2){  animation-delay: 100ms; }
.progress span:nth-child(3){  animation-delay: 200ms; }
.progress span:nth-child(4){  animation-delay: 300ms; }
.progress span:nth-child(5){  animation-delay: 400ms; }
.progress span:nth-child(6){  animation-delay: 500ms; }
.progress span:nth-child(7){  animation-delay: 600ms; }
.progress span:nth-child(8){  animation-delay: 700ms; }
@keyframes wave{
  0%, 40%, 100% { 
    transform: translate(0, 0);
    background-color: #4A72DA;    
  }
  10% { 
    transform: translate(0, -15px); 
    background-color: red;    
  }  
}

■ CodePenで表示

CodePen