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

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

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

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

《 Type 3 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

.centre {
  position: relative;
  display:block;
  padding:150px 0 ;
  left: 50%;
  right: 50%;
  
}
.loading .circle {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  opacity: 0;
  animation-iteration-count: infinite;
  animation-duration: 1.75s;
  animation-direction: foward;
  animation-timing-function: ease-out;
}
.loading .circle:after, .loading .circle:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}
.loading .circle:after {
  box-shadow: 2px 2px 5px #ddd;
  position: absolute;
  border-radius: 50%;
  background-color: white;  
}
/* Shadow */
.circle:before {
  left: 40%;
  top: 40%;
  position: absolute;
  background: linear-gradient(to right, #c5c5c5, transparent);
  transform: rotate(45deg);
  opacity: 0.3;
}
.loading .first {
  z-index:2;
  animation-name: pulse;
}
.loading .second {
  z-index:3;
  animation-name: pulse2;
}
@keyframes pulse {
  0% {
    opacity: 0;
    margin-top: -0.25em;
    margin-left: -0.25em;
    width: 0.5em;
    height: 0.5em;
  }
  10% {
    opacity: 1;
  }
  100% {
    margin-top: -7.5em;
    margin-left: -7.5em;
    opacity: 1;
    height: 15em;
    width: 15em;
  }
}
@keyframes pulse2 {
  0%, 25% {
    opacity: 0;
    margin-top: -0.25em;
    margin-left: -0.25em;
    width: 0.5em;
    height: 0.5em;
  } 
  35% {
    opacity: 1;
  }
  100% {
    margin-top: -7.5em;
    margin-left: -7.5em;
    opacity: 1;
    height: 15em;
    width: 15em;
  }
}

■ CodePenで表示

CodePen