少し不思議な感じがするLoaderを見つけたので、見よう見まねで作ってみました。
グリッドに何か不思議な模様が浮かんでくるのが、Loadingに向いてるかもしれませんね。
後半では、それをLoadingの文字表示をする処理に書き換えてみました。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Soft Grid Loader</title>
</head>
<body>
<div class="loader">
<!-- 25セル -->
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>
</body>
</html>
style.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #020617;
}
/* グリッド */
.loader {
display: grid;
grid-template-columns: repeat(5, 14px);
gap: 6px;
}
/* セル */
.cell {
width: 14px;
height: 14px;
background: #38bdf8;
border-radius: 3px;
opacity: 0.4;
animation: breathe 1.8s ease-in-out infinite;
}
/* ズレは最小限＆自然 */
.cell:nth-child(3n) {
animation-delay: 0.2s;
}
.cell:nth-child(4n) {
animation-delay: 0.4s;
}
/* 呼吸アニメーション */
@keyframes breathe {
0%, 100% {
transform: scale(0.85);
opacity: 0.35;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
/* ごく軽い揺らぎ（チカチカ防止） */
55% {
transform: scale(1.02);
}
60% {
transform: scale(1.03);
}
}
デモ
派生系
上記の5x5のグリッドを、4x4に縮小して、文字が表示するパターンを作成してみました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mini Loading Grid</title>
</head>
<body>
<div class="grid" id="grid"></div>
</body>
</html>
main.js
const grid = document.getElementById("grid");
/* 4x4セルだけ生成 */
const cells = [];
for (let i = 0; i < 16; i++) {
const div = document.createElement("div");
div.className = "cell";
grid.appendChild(div);
cells.push(div);
}
/* 4x4フォント */
const font = {
L: [
"1000",
"1000",
"1000",
"1111"
],
O: [
"0110",
"1001",
"1001",
"0110"
],
A: [
"0110",
"1001",
"1111",
"1001"
],
D: [
"1110",
"1001",
"1001",
"1110"
],
I: [
"1111",
"0100",
"0100",
"1111"
],
N: [
"1001",
"1101",
"1011",
"1001"
],
G: [
"0111",
"1000",
"1011",
"0111"
]
};
const word = "LOADING";
let index = 0;
/* 描画 */
function draw(char) {
const pattern = font[char];
// 全クリア
cells.forEach(c => c.classList.remove("on"));
for (let y = 0; y < 4; y++) {
for (let x = 0; x < 4; x++) {
if (pattern[y][x] === "1") {
const i = y * 4 + x;
if (cells[i]) {
cells[i].classList.add("on");
}
}
}
}
}
/* ループ */
function loop() {
draw(word[index]);
index = (index + 1) % word.length;
}
loop();
setInterval(loop, 900);
style.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #020617;
}
/* 4x4グリッド */
.grid {
display: grid;
grid-template-columns: repeat(4, 18px);
grid-template-rows: repeat(4, 18px);
gap: 4px;
}
/* セル */
.cell {
width: 18px;
height: 18px;
background: #0b1220;
border-radius: 3px;
transition: all 0.25s ease;
}
/* 点灯 */
.cell.on {
background: #38bdf8;
box-shadow: 0 0 8px rgba(56,189,248,0.6);
transform: scale(1.1);
}
デモ
あとがき
Loadingの文字は、4x4のグリッドで書けるアルファベットが限界なので、日本語などはムリゲーですね。
もう少し工夫すれば、いろんな文字対応ができるかもしれないし、
2bitのデータ部分を、16進数などにすると、かなりスマートなプログラムになるので、改良して好きに使ってもらっていいですよ。
0 件のコメント:
コメントを投稿