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

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

CSS ⑥	《1》《2》《3》《4》《5》《6》《7》《8》《9》《10》《11》《12》
スピードサイズ人気度透過処理 SVG WebFont CSS① CSS② CSS③ CSS④ CSS⑤ CSS⑥ CSS⑦

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

《 Type 3 - Volume 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.sp {
  width: 32px;
  height: 32px;
  clear: both;
}
.sp-volume {
  background-color: #000;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spVolRot .6s infinite linear;
  animation: spVolRot .6s infinite linear;
}
.sp-volume:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  left: 5px;
  top: 5px;
  background-color: white;
}
@-webkit-keyframes spVolRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spVolRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

■ CodePenで表示

CodePen