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

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

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 8 - Clock 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.sp {
  width: 32px;
  height: 32px;
  clear: both;
}
.sp-clock {
  border: 1px #000 solid;
  border-radius: 50%;
  position: relative;
}
.sp-clock:before {
  content: '';
  border-left: 1px #000 solid;
  position: absolute;
  top: 2px;
  width: 1px;
  height: calc( 50% - 2px );
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-animation: spClock 1s infinite linear;
  animation: spClock 1s infinite linear;
}
@-webkit-keyframes spClock {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spClock {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

■ CodePenで表示

CodePen