[CSS] NowLoadingサンプル「FallCube」

四角のCubeをアニメートさせるLoaderが後を断ちません。 また、新たなタイプを見つけたので、コード分析して、紹介したいと思います。

デモ

ソースコード : CSSのみバージョン

index.html

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <div id="site_loader_overlay"> <div id="site_loader_animation"></div> </div>

style.css

:root { --c0: transparent; --c1: rgba( 0, 119, 179, 1); --c2: rgba( 87, 189, 204, 1); --c3: rgba(242, 205, 123, 0); } #site_loader_overlay { display: flex; justify-content: center; } #site_loader_animation { width: 44px; height: 44px; position: relative; margin: 22px; } #site_loader_animation::before, #site_loader_animation::after { content:""; width:12px; height:12px; position:absolute; left:0; } #site_loader_animation::before { bottom:0; animation:loader 5.4s linear infinite; } #site_loader_animation::after { bottom:10px; background:var(--c2); opacity:0; animation:base 5.4s linear infinite; } @keyframes loader { 0%,5% { box-shadow: 16px -8px 0 var(--c0), 32px 0px 0 var(--c0), 0px -16px 0 var(--c0), 16px -16px 0 var(--c0), 32px -16px 0 var(--c0), 0px -32px 0 var(--c0), 16px -32px 0 var(--c0), 32px -32px 0 var(--c3); } 10% { box-shadow: 16px 0 var(--c1), 32px -8px var(--c0), 0 -16px var(--c0), 16px -16px var(--c0), 32px -16px var(--c0), 0 -32px var(--c0), 16px -32px var(--c0), 32px -32px var(--c3); } 15% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -24px var(--c0), 16px -16px var(--c0), 32px -16px var(--c0), 0 -32px var(--c0), 16px -32px var(--c0), 32px -32px var(--c3); } 20% { box-shadow: 16px 0px var(--c1), 32px 0px var(--c1), 0px -16px var(--c1), 16px -24px var(--c0), 32px -16px var(--c0), 0px -32px var(--c0), 16px -32px var(--c0), 32px -32px var(--c3); } 25% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -24px var(--c0), 0 -32px var(--c0), 16px -32px var(--c0), 32px -32px var(--c3); } 30% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -50px var(--c0), 16px -32px var(--c0), 32px -32px var(--c3); } 35% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -50px var(--c0), 32px -32px var(--c3); } 40% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -50px var(--c3); } 45%,55% { box-shadow: 16px 0 var(--c1), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 60% { box-shadow: 16px 8px var(--c0), 32px 0 var(--c1), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 65% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -16px var(--c1), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 70% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -16px var(--c1), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 75% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -8px var(--c0), 32px -16px var(--c1), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 80% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -8px var(--c0), 32px -8px var(--c0), 0 -32px var(--c1), 16px -32px var(--c1), 32px -32px var(--c2); } 85% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -8px var(--c0), 32px -8px var(--c0), 0 -24px var(--c0), 16px -32px var(--c1), 32px -32px var(--c2); } 90% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -8px var(--c0), 32px -8px var(--c0), 0 -24px var(--c0), 16px -24px var(--c0), 32px -32px var(--c2); } 100% { box-shadow: 16px 8px var(--c0), 32px 8px var(--c0), 0 -8px var(--c0), 16px -8px var(--c0), 32px -8px var(--c0), 0 -24px var(--c0), 16px -24px var(--c0), 32px -24px var(--c0); } } @keyframes base { 0%,100% { bottom:10px; opacity:0; } 5%,50% { bottom:0; opacity:1; } 55% { bottom:-10px; opacity:0; } }

解説

cubeの数に対して、基礎HTMLが少ないことに気がついた人は、エンジニアレベルが比較的高いですね。 今回の3x3のcubeオブジェクトは、box-shadowで表現されています。 陰の効果をボカシなしで、元の四角形のoffset座標をずらすことで、複数のブロック(cube)を表示しているんですね。 このコードの難点は、cssでのbox-shadowのコードをいちいち書かないといけないので、クソ長くなってしまう事です。

あとがき

cssのproperty変数を使って、若干ですが、見た目をわかりやすくしてコーディングしてみましたが、やはり長い！ Javascriptを使って効率化しても良いし、このコードは、元の四角を中心において、上下左右に配置する仕様ですが、 個人的には、左上の配置する仕様にした方が、エレメントの配置が楽になる（座標が設置しやすい）と思いました。 でも、色々なcubeパターンを作っていくうちに、なんだか法則性のようなものも見えてきた感じがして、そろそろゾーンに入りそうです。 面白いLoadingサイトを見つけたら、是非ご連絡ください。 このブログのライブラリに加えたいと思います。

このLoadngが使用されていたサイト

https://www.tankan-diy-land.com/30804 ※2025年12月時点（ページ改修していたらごめんなさい）