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

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

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 10 - Texture 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.sp {
  width: 32px;
  height: 32px;
  clear: both;
}
.sp-texture {
  border: 1px #000 solid;
  border-radius: 4px;
  position: relative;
  background: linear-gradient(45deg, transparent 49%, #000 50%, #000 50%,
  transparent 51%, transparent), linear-gradient(-45deg,
  transparent 49%, #000 50%, #000 50%, transparent 51%, transparent);
  background-size: 16px 16px;
  background-position: 0% 0%;
  -webkit-animation: spTexture 1s infinite linear;
  animation: spTexture 1s infinite linear;
}
@-webkit-keyframes spTexture {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -16px 0px;
  }
}
@keyframes spTexture {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -16px 0px;
  }
}

■ CodePenで表示

CodePen