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

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

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 11 - LoadBar 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.sp {
  width: 32px;
  height: 32px;
  clear: both;
}
.sp-loadbar {
  width: 50px;
  height: 18px;
  border: 1px #000 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%,
  transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  -webkit-animation: spLoadBar 0.8s infinite linear;
  animation: spLoadBar 0.8s infinite linear;
}
@-webkit-keyframes spLoadBar {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -20px 0px;
  }
}
@keyframes spLoadBar {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -20px 0px;
  }
}

■ CodePenで表示

CodePen