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

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

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》
スピードサイズ人気度透過処理 SVG WebFont CSS① CSS② CSS③ CSS④ CSS⑤ CSS⑥ CSS⑦

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

《 Type 16 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

@-webkit-keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1; } }

@keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1; } }

.ball-grid-beat {
  width: 57px; }
  .ball-grid-beat > div:nth-child(1) {
    -webkit-animation-delay: 0.15s;
            animation-delay: 0.15s;
    -webkit-animation-duration: 1.45s;
            animation-duration: 1.45s; }
  .ball-grid-beat > div:nth-child(2) {
    -webkit-animation-delay: -0.02s;
            animation-delay: -0.02s;
    -webkit-animation-duration: 0.97s;
            animation-duration: 0.97s; }
  .ball-grid-beat > div:nth-child(3) {
    -webkit-animation-delay: 0.66s;
            animation-delay: 0.66s;
    -webkit-animation-duration: 1.23s;
            animation-duration: 1.23s; }
  .ball-grid-beat > div:nth-child(4) {
    -webkit-animation-delay: 0.64s;
            animation-delay: 0.64s;
    -webkit-animation-duration: 1.24s;
            animation-duration: 1.24s; }
  .ball-grid-beat > div:nth-child(5) {
    -webkit-animation-delay: -0.19s;
            animation-delay: -0.19s;
    -webkit-animation-duration: 1.13s;
            animation-duration: 1.13s; }
  .ball-grid-beat > div:nth-child(6) {
    -webkit-animation-delay: 0.69s;
            animation-delay: 0.69s;
    -webkit-animation-duration: 1.42s;
            animation-duration: 1.42s; }
  .ball-grid-beat > div:nth-child(7) {
    -webkit-animation-delay: 0.58s;
            animation-delay: 0.58s;
    -webkit-animation-duration: 1.14s;
            animation-duration: 1.14s; }
  .ball-grid-beat > div:nth-child(8) {
    -webkit-animation-delay: 0.21s;
            animation-delay: 0.21s;
    -webkit-animation-duration: 1.17s;
            animation-duration: 1.17s; }
  .ball-grid-beat > div:nth-child(9) {
    -webkit-animation-delay: -0.18s;
            animation-delay: -0.18s;
    -webkit-animation-duration: 0.65s;
            animation-duration: 0.65s; }
  .ball-grid-beat > div {
    background-color: DarkBlue;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-beat;
            animation-name: ball-grid-beat;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0; }

■ GitHubで表示

GitHub