CSS だけで作るローディング画像 ⑤
= Type 14 =
= 画像ファイルを用意する必要がありません =
  フリーで使えるローディング画像 -《総目次》
 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》
《29》
《30》
《31》
スピード    
サイズ    
人気度    
透過処理    
SVG    
WebFont    
CSS①    
CSS②    
CSS③    
CSS④    
CSS⑤    
CSS⑥ 
  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
《 Type 14 》
■ HTML ソース  Copy HTMLソース
<span class="plus-loader"></span>
■ CSS ソース  Copy CSSソース
@-moz-keyframes plus-loader-top {
  2.5% {
    background: #f86;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  13.75% {
    background: #ff430d;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  13.76% {
    background: #ffae0d;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    background: #fc6;
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  27.5% {
    background: #fc6;
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  41.25% {
    background: #ffae0d;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  41.26% {
    background: #2cc642;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    background: #6d7;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  52.5% {
    background: #6d7;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  63.75% {
    background: #2cc642;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  63.76% {
    background: #1386d2;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    background: #4ae;
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    background: #4ae;
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91.25% {
    background: #1386d2;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  91.26% {
    background: #ff430d;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    background: #f86;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@-webkit-keyframes plus-loader-top {
  2.5% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  27.5% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@keyframes plus-loader-top {
  2.5% {
    background: #f86;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  13.75% {
    background: #ff430d;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  13.76% {
    background: #ffae0d;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    background: #fc6;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  27.5% {
    background: #fc6;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  41.25% {
    background: #ffae0d;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  41.26% {
    background: #2cc642;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    background: #6d7;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  52.5% {
    background: #6d7;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  63.75% {
    background: #2cc642;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  63.76% {
    background: #1386d2;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    background: #4ae;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    background: #4ae;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91.25% {
    background: #1386d2;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  91.26% {
    background: #ff430d;
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    background: #f86;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@-moz-keyframes plus-loader-bottom {
  0% {
    background: #fc6;
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  50% {
    background: #fc6;
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  75% {
    background: #4ae;
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  100% {
    background: #4ae;
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@-webkit-keyframes plus-loader-bottom {
  0% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  50% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  75% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  100% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@keyframes plus-loader-bottom {
  0% {
    background: #fc6;
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  50% {
    background: #fc6;
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  75% {
    background: #4ae;
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  100% {
    background: #4ae;
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@-moz-keyframes plus-loader-background {
  0% {
    background: #f86;
    -moz-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  25% {
    background: #f86;
    -moz-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  27.5% {
    background: #6d7;
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  50% {
    background: #6d7;
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  52.5% {
    background: #6d7;
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  75% {
    background: #6d7;
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  77.5% {
    background: #f86;
    -moz-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
  100% {
    background: #f86;
    -moz-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -moz-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@-webkit-keyframes plus-loader-background {
  0% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  25% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  27.5% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  75% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  77.5% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
  100% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
@keyframes plus-loader-background {
  0% {
    background: #f86;
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  25% {
    background: #f86;
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  27.5% {
    background: #6d7;
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  50% {
    background: #6d7;
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  52.5% {
    background: #6d7;
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  75% {
    background: #6d7;
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  77.5% {
    background: #f86;
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
  100% {
    background: #f86;
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -moz-animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}
/* :not(:required) hides this rule from IE9 and below */
.plus-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #f86;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px;
  -moz-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-animation: plus-loader-background 3s infinite ease-in-out;
  -webkit-animation: plus-loader-background 3s infinite ease-in-out;
  animation: plus-loader-background 3s infinite ease-in-out;
}
.plus-loader:not(:required)::after {
  background: #f86;
  -moz-border-radius: 24px 0 0 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -moz-animation: plus-loader-top 3s infinite linear;
  -webkit-animation: plus-loader-top 3s infinite linear;
  animation: plus-loader-top 3s infinite linear;
}
.plus-loader:not(:required)::before {
  background: #fc6;
  -moz-border-radius: 24px 0 0 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -moz-animation: plus-loader-bottom 3s infinite linear;
  -webkit-animation: plus-loader-bottom 3s infinite linear;
  animation: plus-loader-bottom 3s infinite linear;
}
■ GitHubで表示
GitHub  
スポンサーリンク
  フリーで使えるローディング画像 -《総目次》
スピード 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
サイズ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
人気度 
《1 背景：白／画像：黒》
《2 背景：黒／画像：白》
《3 背景：グレー／画像：黒》
《4 背景：グレー／画像：赤》
《5 背景：白／画像：赤》
《6 背景：黒／画像：赤》
《7 背景：白／画像：オレンジ》
《8 背景：白／画像：グリーン》
透過処理 
《1》
《2》
《3 - 星座記号》
《4》
《5》
《6》
《7》
《8》
SVG画像 
 透過処理済みSVGローダー（サイズ変更は幅の設定のみ）
Web Font
 Webフォントで作るローディング画像
CSS ① 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
CSS ② 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
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》
CSS ④ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
《13》
《14》
《15》
《16》
《17》
《18》
《19》
《20》
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》
《29》
《30》
《31》
CSS ⑥ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
《9》
《10》
《11》
《12》
CSS ⑦ 
《1》
《2》
《3》
《4》
《5》
《6》
《7》
《8》
スポンサーリンク
スポンサーリンク

おすすめサイト・関連サイト…

スポンサーリンク
Last updated : 2024/06/30
 Copied ! 
 Click to Copy 
© みんなの知識 ちょっと便利帳 - https://www.benricho.org/loading_images/withCSS_05/14.html