NowLoadingサンプルと称して、CSSアニメーションを作るのは個人的に好きな作業です。
これまでCUBE系のLoadingアニメーションは、何パターンか作ってきましたが、少し違うタイプでのCubeアニメーションになります。
ソースコード
index.html
<link rel="stylesheet" href="style.css">
<div class="preloader">
<div class="loader rubix-cube">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3 color-1"></div>
<div class="layer layer-4"></div>
<div class="layer layer-5"></div>
<div class="layer layer-6"></div>
<div class="layer layer-7"></div>
<div class="layer layer-8"></div>
</div>
</div>
style.css
.preloader,
.preloader *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
}
.preloader .color-1 {
background-color: #EEAA36 !important;
}
.rubix-cube {
border: 1px solid #FFF;
width: 48px;
height: 48px;
background-color: #FFF;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rubix-cube .layer {
width: 14px;
height: 14px;
background-color: #0b3d2c;
border: 1px solid #FFF;
position: absolute;
}
.rubix-cube .layer-1 {
left: 0px;
top: 0px;
-webkit-animation: rubixcube4 2s infinite linear;
animation: rubixcube4 2s infinite linear;
}
.rubix-cube .layer-2 {
left: 16px;
top: 0px;
-webkit-animation: rubixcube3 2s infinite linear;
animation: rubixcube3 2s infinite linear;
}
.rubix-cube .layer-3 {
left: 32px;
top: 0px;
}
.rubix-cube .layer-4 {
left: 0px;
top: 16px;
-webkit-animation: rubixcube5 2s infinite linear;
animation: rubixcube5 2s infinite linear;
}
.rubix-cube .layer-5 {
left: 16px;
top: 16px;
-webkit-animation: rubixcube2 2s infinite linear;
animation: rubixcube2 2s infinite linear;
}
.rubix-cube .layer-6 {
left: 32px;
top: 16px;
-webkit-animation: rubixcube1 2s infinite linear;
animation: rubixcube1 2s infinite linear;
}
.rubix-cube .layer-7 {
left: 0px;
top: 32px;
-webkit-animation: rubixcube6 2s infinite linear;
animation: rubixcube6 2s infinite linear;
}
.rubix-cube .layer-8 {
left: 16px;
top: 32px;
-webkit-animation: rubixcube7 2s infinite linear;
animation: rubixcube7 2s infinite linear;
}
@-webkit-keyframes rubixcube1 {
20% {
top: 16px;
left: 32px;
}
30% {
top: 32px;
left: 32px;
}
40% {
top: 32px;
left: 32px;
}
50% {
top: 32px;
left: 32px;
}
60% {
top: 32px;
left: 32px;
}
70% {
top: 32px;
left: 32px;
}
80% {
top: 32px;
left: 32px;
}
90% {
top: 32px;
left: 32px;
}
100% {
top: 32px;
left: 16px;
}
}
@keyframes rubixcube1 {
20% {
top: 16px;
left: 32px;
}
30% {
top: 32px;
left: 32px;
}
40% {
top: 32px;
left: 32px;
}
50% {
top: 32px;
left: 32px;
}
60% {
top: 32px;
left: 32px;
}
70% {
top: 32px;
left: 32px;
}
80% {
top: 32px;
left: 32px;
}
90% {
top: 32px;
left: 32px;
}
100% {
top: 32px;
left: 16px;
}
}
@-webkit-keyframes rubixcube2 {
30% {
left: 16px;
}
40% {
left: 32px;
}
50% {
left: 32px;
}
60% {
left: 32px;
}
70% {
left: 32px;
}
80% {
left: 32px;
}
90% {
left: 32px;
}
100% {
left: 32px;
}
}
@keyframes rubixcube2 {
30% {
left: 16px;
}
40% {
left: 32px;
}
50% {
left: 32px;
}
60% {
left: 32px;
}
70% {
left: 32px;
}
80% {
left: 32px;
}
90% {
left: 32px;
}
100% {
left: 32px;
}
}
@-webkit-keyframes rubixcube3 {
30% {
top: 0px;
}
40% {
top: 0px;
}
50% {
top: 16px;
}
60% {
top: 16px;
}
70% {
top: 16px;
}
80% {
top: 16px;
}
90% {
top: 16px;
}
100% {
top: 16px;
}
}
@keyframes rubixcube3 {
30% {
top: 0px;
}
40% {
top: 0px;
}
50% {
top: 16px;
}
60% {
top: 16px;
}
70% {
top: 16px;
}
80% {
top: 16px;
}
90% {
top: 16px;
}
100% {
top: 16px;
}
}
@-webkit-keyframes rubixcube4 {
50% {
left: 0px;
}
60% {
left: 16px;
}
70% {
left: 16px;
}
80% {
left: 16px;
}
90% {
left: 16px;
}
100% {
left: 16px;
}
}
@keyframes rubixcube4 {
50% {
left: 0px;
}
60% {
left: 16px;
}
70% {
left: 16px;
}
80% {
left: 16px;
}
90% {
left: 16px;
}
100% {
left: 16px;
}
}
@-webkit-keyframes rubixcube5 {
60% {
top: 16px;
}
70% {
top: 0px;
}
80% {
top: 0px;
}
90% {
top: 0px;
}
100% {
top: 0px;
}
}
@keyframes rubixcube5 {
60% {
top: 16px;
}
70% {
top: 0px;
}
80% {
top: 0px;
}
90% {
top: 0px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes rubixcube6 {
70% {
top: 32px;
}
80% {
top: 16px;
}
90% {
top: 16px;
}
100% {
top: 16px;
}
}
@keyframes rubixcube6 {
70% {
top: 32px;
}
80% {
top: 16px;
}
90% {
top: 16px;
}
100% {
top: 16px;
}
}
@-webkit-keyframes rubixcube7 {
80% {
left: 16px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
@keyframes rubixcube7 {
80% {
left: 16px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
デモ
改良ポイント
cssの、.preloader 箇所が、表示背景として、画面を覆い隠すようになっています。
アニメーションパーツ部分は、この内部で中央表示するので、この座標を変更したり、
背景色などを変更したり何かしらの画像を設置しても、いい感じの効果が出ると思います。
使用すると良さげなWebページ
HTMLにベタ書きできるタイプの比較的シンプルLoaderなので、5秒以内程度の読み込みが見込まれるけど、
読み込み時のガクつく表示を回避したいWebシステム系のページで使うと効果的です。
デザインが四角のみでできているので、柔らかめのイメージであるWebサイトよりは、お堅い感じのツール系とかシステム系の方が見合うでしょうね。
あとがき
このNowLoadingは、
このサイトに設置されていたもので、
結構効果的に使われていたので、紹介して見ました。（2025年12月現在）
リンク先のページが変わってしまったら見れないので、このブログページでサルベージしておいたという、おせっかい記事でもありますけどね・・・
個人的には、CSSが長がったるいので、JSを使って効率のいいコードに書き換えようかと思ったんですが、できるだけCSSのみで書き上げるのもNowLoading界隈での美徳でもありますからね。
それにしてもプロパティ変数使って、もう少し短くできないものか・・・と、いまだに少しモヤモヤしているんですが、まずはNowLoading好きの方に向けてのご紹介に留めておきます。
0 件のコメント:
コメントを投稿