MicroAd Compass Wipe_Banner - PC/SP-header部、PC/SP-body部セットで設置 - 外部HTML

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

  フリーで使えるローディング画像 -《総目次》
 CSS ③ 
  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
    *カラーサンプルはこちらが便利です。
  • 大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。
《 Type 19 》
HTML ソース  Copy HTMLソース
<div class="loader"><div class="ball-clip-rotate-multiple"><div></div><div></div></div></div>
CSS ソース  Copy CSSソース
.loader {
  display: inline-block}
  
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

.ball-clip-rotate-multiple {
  position: relative; }
  .ball-clip-rotate-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -20px;
    top: -20px;
    border: 2px solid OrangeRed;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
            animation: rotate 1s 0s ease-in-out infinite; }
    .ball-clip-rotate-multiple > div:last-child {
      display: inline-block;
      top: -10px;
      left: -10px;
      width: 15px;
      height: 15px;
      -webkit-animation-duration: 0.5s;
              animation-duration: 0.5s;
      border-color: OrangeRed transparent OrangeRed transparent;
      -webkit-animation-direction: reverse;
              animation-direction: reverse; }
GitHubで表示
スポンサーリンク
  フリーで使えるローディング画像 -《総目次》
スピード 
サイズ 
人気度 
透過処理 
SVG画像 
Web Font
CSS ① 
CSS ② 
CSS ③ 
CSS ④ 
CSS ⑤ 
CSS ⑥ 
CSS ⑦ 
スポンサーリンク
スポンサーリンク

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

スポンサーリンク
Last updated : 2024/06/30
 Copied ! 
 Click to Copy