考えているドット絵文字に変換されるローディングアニメーション
考える顔（Thinking Face）の絵文字が考え中であることを表現するローディングアニメーション。テキストと絵文字がモーフィングします。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">:root {
--bg-color: #1a2035;
--dot-color: #FFD700;
--dot-size: 8px;
--grid-gap: 10px;
--anim-duration: 1.2s;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--dot-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
}
.loader-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform-origin: center center;
transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dot {
position: absolute;
left: 50%;
top: 50%;
width: var(--dot-size);
height: var(--dot-size);
transform: translate3d(var(--tx), var(--ty), 0);
transition: transform var(--anim-duration) cubic-bezier(0.4, 0.0, 0.2, 1), opacity var(--anim-duration) ease;
will-change: transform, opacity;
}
.dot-inner {
display: block;
width: 100%;
height: 100%;
background-color: var(--dot-color);
border-radius: 50%;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 856px; height: 482px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="loader-container" id="container" aria-live="polite" aria-label="Loading animation">
</div>
<div class="sr-only" id="aria-status">Loading</div>
<script id="js-section">class DotTextLoader {
constructor(containerId, options = {}) {
this.container = document.getElementById(containerId);
this.gridGap = options.gridGap || 10;
this.fontSize = options.fontSize || 150;
this.fontFamily = options.fontFamily || 'Verdana, sans-serif';
if (options.dotSize) {
document.documentElement.style.setProperty('--dot-size', options.dotSize + 'px');
}
this.baseWidth = 1920;
this.baseHeight = 1080;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
// ドットを格納するラッパー要素を作成（スケーリング用）
this.stage = document.createElement('div');
this.stage.style.position = 'absolute';
this.stage.style.top = '50%';
this.stage.style.left = '50%';
this.stage.style.width = this.baseWidth + 'px';
this.stage.style.height = this.baseHeight + 'px';
this.stage.style.marginLeft = -(this.baseWidth / 2) + 'px';
this.stage.style.marginTop = -(this.baseHeight / 2) + 'px';
this.stage.style.transformOrigin = 'center center';
this.container.appendChild(this.stage);
this.dots = [];
this.textCoords = [];
this.emojiCoords = [];
this.isAnimating = false;
}
// スケール更新（画面リサイズ時に呼ばれる）
updateScale() {
const scaleW = window.innerWidth / this.baseWidth;
const scaleH = window.innerHeight / this.baseHeight;
// アスペクト比を維持しつつ、画面に収まるようにスケール（contain）
const scale = Math.min(scaleW, scaleH);
this.stage.style.transform = `scale(${scale})`;
}
calculateTextCoordinates(text) {
const width = this.baseWidth;
const height = this.baseHeight;
this.canvas.width = width;
this.canvas.height = height;
this.ctx.clearRect(0, 0, width, height);
this.ctx.font = `bold ${this.fontSize}px ${this.fontFamily}`;
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillStyle = '#fff';
this.ctx.fillText(text, width / 2, height / 2);
return this.scanCanvas();
}
calculateEmojiCoordinates() {
const width = this.canvas.width;
const height = this.canvas.height;
const ctx = this.ctx;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#fff';
// thinking2.svg のSVGパスデータ
const paths = [
"M195.522003,544.373779 C186.149826,518.729004 179.770172,492.799805 177.609894,465.906067 C172.333755,400.222595 186.057404,338.801331 219.435867,281.970276 C243.655533,240.733170 276.701538,207.758972 316.150452,181.060318 C361.038971,150.680191 410.459167,132.078308 464.105286,124.552849 C494.256378,120.323257 524.378601,119.897484 554.673828,123.483849 C625.094482,131.820282 687.756775,158.497559 741.986328,203.849472 C793.515869,246.943375 827.324341,301.619141 842.762268,367.231140 C849.114929,394.230133 852.018188,421.684357 851.142883,449.425171 C849.580139,498.953644 838.151062,546.039551 814.194885,589.601196 C794.289185,625.797363 768.040710,656.638000 734.769531,681.537903 C702.629272,705.591614 667.398865,723.139709 628.879822,734.040527 C607.709351,740.031738 586.126892,744.187866 564.075134,745.371521 C558.801758,745.654602 554.835693,747.263000 550.834351,751.517883 C545.740173,756.934692 543.670410,760.464050 546.893433,768.451843 C553.316284,784.369812 544.952026,800.784851 527.878296,810.369934 C509.059692,820.934570 488.519501,826.634705 467.643524,831.024109 C450.233215,834.684814 432.760345,838.359924 414.972321,839.763550 C375.963562,842.841614 338.755493,837.980469 306.167023,813.946960 C286.171143,799.200378 272.026154,779.994202 263.341644,756.775818 C251.447708,724.977112 247.748337,692.587952 256.712738,659.353882 C256.842804,658.871765 256.864258,658.322998 257.116028,657.916626 C262.564240,649.122925 258.505188,643.198303 252.256363,636.440430 C227.456635,609.620605 208.708160,578.892151 195.522003,544.373779 M231.376282,304.790527 C166.789841,426.920135 205.621521,558.759705 273.161530,626.923523 C285.256256,612.668152 299.445984,600.485901 312.390808,587.073059 C318.671997,580.564697 324.253845,573.535339 327.895996,565.176575 C334.724121,549.506104 334.085510,533.434387 330.327087,517.201294 C326.308228,499.843170 333.335968,485.186188 348.830811,478.455322 C365.269897,471.314362 387.369354,475.631104 399.688934,488.656982 C421.392609,511.604980 427.148834,539.514343 424.700409,569.949524 C424.158691,576.683472 421.722748,583.067261 420.883118,590.059570 C422.829010,589.692383 424.307617,589.474976 425.756165,589.130859 C459.572815,581.097717 493.365356,572.961670 527.206360,565.032410 C558.937744,557.597473 590.368896,548.816833 622.706604,544.084595 C638.073364,541.835815 650.768066,545.290466 659.557739,558.982361 C663.879395,565.714111 666.505737,573.062500 667.039856,580.970276 C668.151978,597.433594 662.382446,614.759094 643.776184,622.195374 C626.433655,629.126526 608.660522,634.637085 590.611816,639.346985 C578.770508,642.437012 566.960327,645.646240 554.837585,648.881714 C555.378906,649.945679 555.582275,650.575500 555.965271,651.064819 C567.655823,665.998718 567.078369,690.021423 552.920532,703.146973 C550.748352,705.160583 551.000305,707.117249 552.673096,709.278992 C555.468689,712.891846 557.397949,716.957031 558.210388,721.447632 C558.621277,723.718201 559.526367,724.559326 561.887817,724.261230 C567.335266,723.573547 572.849915,723.353027 578.266541,722.495972 C635.692749,713.409241 686.912781,690.698975 731.184448,652.727844 C764.656189,624.019714 790.211182,589.431458 807.219666,548.811584 C824.943726,506.482788 831.430786,462.302429 827.981506,416.454620 C825.101135,378.167786 814.668762,342.161499 797.264404,308.179169 C775.234070,265.164368 744.418030,229.580078 704.909851,201.609634 C660.209534,169.963348 610.564697,151.282043 556.206482,145.221680 C521.260437,141.325577 486.317322,142.055161 451.766602,148.615891 C384.328583,161.421448 325.626099,191.006363 277.684448,240.876190 C259.418915,259.876343 244.224243,281.001312 231.376282,304.790527 M410.516418,818.777771 C412.667389,818.570618 414.827362,818.431030 416.967957,818.146057 C439.088928,815.201233 460.932190,810.763062 482.570557,805.389587 C495.359100,802.213806 507.806946,797.903320 519.059692,790.796509 C525.013611,787.036438 527.407410,781.482239 526.148010,775.032593 C524.719543,767.717468 521.032043,763.941467 513.773865,762.527283 C511.325684,762.050354 508.841187,761.717346 506.358093,761.472778 C503.109528,761.152954 498.540039,761.878174 498.260620,757.635071 C497.985504,753.456909 502.744171,753.535156 505.792999,752.671570 C513.649536,750.446106 521.499512,748.284912 528.505554,743.840637 C534.259827,740.190491 536.957275,734.993408 536.571228,728.290771 C536.149170,720.961060 532.704773,715.760376 525.534729,713.202942 C520.290527,711.332336 514.911987,710.509644 509.393280,710.295288 C506.248138,710.173157 502.083038,710.546326 501.661285,706.609253 C501.229462,702.578613 505.532623,702.344177 508.482391,701.541870 C516.676941,699.313171 524.898193,697.189575 532.408752,693.033020 C536.818298,690.592773 540.013245,687.149780 541.595276,682.303284 C545.675476,669.803650 538.770935,658.362793 525.087830,655.512024 C516.269470,653.674683 507.213959,653.996887 498.266907,653.319275 C495.024689,653.073730 490.514709,653.337158 489.940216,649.491089 C489.332550,645.422791 494.055481,645.340393 496.829712,644.554260 C528.840942,635.483215 560.919250,626.648804 592.931702,617.581970 C607.648865,613.413818 622.613220,610.011414 636.650513,603.644287 C643.439392,600.564880 646.844910,595.319458 647.571960,588.160034 C648.117798,582.784668 647.375977,577.500427 645.471619,572.447998 C642.426697,564.369873 639.377136,562.484192 630.684082,563.081482 C628.029480,563.263855 625.359863,563.411255 622.735474,563.820679 C598.386169,567.618835 574.578003,573.937378 550.633423,579.575684 C502.237335,590.971924 453.923706,602.718201 405.569031,614.290771 C398.784637,615.914490 392.073334,618.176575 385.035736,618.230469 C378.288910,618.282166 374.895752,612.800659 377.676483,607.048706 C378.775421,604.775574 380.702301,603.569397 382.801331,602.513550 C391.089020,598.344482 396.812256,591.810303 399.932739,583.172241 C409.273956,557.314026 405.456360,532.809509 390.325775,510.458771 C383.701263,500.673126 374.147430,493.499054 360.785583,495.230072 C352.486359,496.305206 347.868774,502.757416 349.726044,510.890625 C350.280823,513.320129 351.162170,515.681396 351.622345,518.125122 C357.487854,549.272766 353.702301,577.785950 329.120880,600.668518 C320.099762,609.066101 311.076385,617.472961 302.349579,626.172058 C292.230377,636.259033 284.027191,647.652649 279.221924,661.351562 C271.348297,683.797668 271.685638,706.385498 277.463715,729.126282 C283.889771,754.417114 295.361816,776.729065 315.856537,793.682007 C343.279236,816.365662 375.137909,822.436951 410.516418,818.777771 z",
"M637.025635,428.372406 C620.258179,432.213226 606.000610,425.806213 594.924500,409.722534 C580.361206,388.575012 580.747986,353.056946 595.788940,332.291199 C597.041504,330.561859 598.429565,328.930695 600.114990,326.797852 C596.063538,326.298706 593.078979,328.269379 589.861206,329.040222 C587.597656,329.582428 585.347229,330.179199 583.086487,330.733246 C573.779968,333.014038 566.822571,329.169586 563.997864,320.193207 C561.044556,310.808044 564.397400,303.645569 573.504333,300.226227 C592.016052,293.275513 611.205627,289.964050 630.919373,288.535095 C662.709900,286.230865 693.206970,291.425079 722.935059,302.351593 C727.800232,304.139771 732.390808,306.472626 736.963379,308.858551 C746.005737,313.576935 748.328735,320.119263 744.395691,329.608643 C741.065369,337.643860 732.745605,341.402527 724.127258,338.121826 C715.264282,334.747986 706.514160,331.128296 697.320740,328.679749 C682.332825,324.687775 667.145203,322.115692 651.566101,321.592102 C651.100708,323.226776 652.547302,323.661621 653.248047,324.302704 C674.783997,344.005554 678.586670,384.217865 661.560669,410.051422 C655.719543,418.914062 648.008118,425.563324 637.025635,428.372406 z",
"M419.021423,296.782349 C430.104767,302.752869 437.301025,311.627930 441.513092,322.950836 C450.143707,346.151703 449.213593,368.727692 435.826263,389.939240 C418.684143,417.100067 384.545837,416.908844 367.808289,389.455139 C353.642761,366.220123 352.790833,341.760925 364.784882,317.516724 C372.549988,301.820709 385.554657,292.618195 403.844360,292.736145 C409.065765,292.769775 414.020264,294.234009 419.021423,296.782349 z",
"M444.892639,267.203918 C406.926514,254.930191 369.268036,255.098785 331.538422,266.392242 C330.262421,266.774170 328.974213,267.115112 327.695404,267.487854 C313.805267,271.536438 303.453857,262.490814 305.814911,248.242935 C306.608551,243.453644 309.491028,240.344345 314.111176,238.485718 C331.873749,231.339996 350.408997,227.421631 369.368500,225.834213 C397.178070,223.505814 424.544159,226.314682 451.208008,234.841644 C460.091949,237.682678 468.802307,241.000107 477.075958,245.357117 C485.086090,249.575348 487.277832,256.327698 483.574341,265.205109 C480.280548,273.100403 472.251068,277.119873 464.444519,274.468750 C457.988800,272.276398 451.661926,269.704651 444.892639,267.203918 z",
"M601.175659,513.541626 C601.423645,524.756592 595.645508,531.166992 586.580200,530.323364 C583.792419,530.063904 581.546387,528.646729 579.303528,527.245117 C558.400269,514.182312 535.762817,505.808990 511.337280,502.574951 C492.197113,500.040710 473.157593,500.645325 454.398254,505.779053 C450.566833,506.827576 446.823425,508.335144 442.752075,508.367462 C435.713562,508.423309 431.339325,504.996033 429.910156,498.253235 C428.525879,491.722076 431.041443,487.800934 437.786102,484.795959 C459.148102,475.278412 481.742798,474.625275 504.425934,475.973969 C526.296265,477.274384 547.561157,482.007141 567.847534,490.554260 C577.695251,494.703308 587.126465,499.609222 595.609619,506.210571 C598.033386,508.096680 600.098267,510.167816 601.175659,513.541626 z"
];
const cx = width / 2;
const cy = height / 2;
const svgW = 1024;
const svgH = 1024;
// 絵文字を2回り小さくする（0.85 → 0.45）
const targetH = Math.max(height * 0.45, 200);
const scale = targetH / svgH;
ctx.save();
ctx.translate(cx, cy);
ctx.scale(scale, scale);
ctx.translate(-svgW / 2, -svgH / 2);
ctx.fillStyle = '#fff';
paths.forEach((d, index) => {
ctx.save();
// 顔と手の隙間調整
if (index === 3) {
ctx.translate(0, -12);
}
// 目を上向きに（目のパスを上に移動して「考えている」表情に）
if (index === 1 || index === 2) {
ctx.translate(0, -25);
}
const p = new Path2D(d);
ctx.fill(p);
ctx.restore();
});
ctx.restore();
return this.scanCanvas();
}
scanCanvas() {
const width = this.canvas.width;
const height = this.canvas.height;
const coordinates = [];
const imageData = this.ctx.getImageData(0, 0, width, height).data;
const gap = this.gridGap;
for (let y = 0; y < height; y += gap) {
for (let x = 0; x < width; x += gap) {
const index = (y * width + x) * 4;
const alpha = imageData[index + 3];
if (alpha > 128) {
coordinates.push({ x: x - width / 2, y: y - height / 2 });
}
}
}
return coordinates;
}
initDots(text) {
this.textCoords = this.calculateTextCoordinates(text);
this.emojiCoords = this.calculateEmojiCoordinates();
const maxCount = Math.max(this.textCoords.length, this.emojiCoords.length);
const fragment = document.createDocumentFragment();
this.dots = [];
for (let i = 0; i < maxCount; i++) {
const textCoord = this.textCoords[i] || this.textCoords[this.textCoords.length - 1];
const emojiCoord = this.emojiCoords[i] || this.emojiCoords[this.emojiCoords.length - 1];
const dotElement = document.createElement('div');
dotElement.className = 'dot active';
dotElement.innerHTML = '<span class="dot-inner"></span>';
dotElement.style.setProperty('--tx', `${textCoord.x}px`);
dotElement.style.setProperty('--ty', `${textCoord.y}px`);
dotElement.dataset.textX = textCoord.x;
dotElement.dataset.textY = textCoord.y;
dotElement.dataset.emojiX = emojiCoord.x;
dotElement.dataset.emojiY = emojiCoord.y;
this.dots.push(dotElement);
this.stage.appendChild(dotElement);
}
this.updateScale();
}
formEmoji() {
this.dots.forEach((dot) => {
// ランダムな遅延を加えることで、「固まって動く」のではなく「バラバラと変形する」表現にする
const delay = Math.random() * 0.6;
dot.style.transitionDelay = `${delay}s`;
const targetX = parseFloat(dot.dataset.emojiX);
const targetY = parseFloat(dot.dataset.emojiY);
dot.style.setProperty('--tx', `${targetX}px`);
dot.style.setProperty('--ty', `${targetY}px`);
dot.classList.remove('active');
});
}
formText() {
this.dots.forEach((dot) => {
// 戻る時も同様にバラバラと戻る
const delay = Math.random() * 0.6;
dot.style.transitionDelay = `${delay}s`;
const textX = parseFloat(dot.dataset.textX);
const textY = parseFloat(dot.dataset.textY);
dot.style.setProperty('--tx', `${textX}px`);
dot.style.setProperty('--ty', `${textY}px`);
dot.classList.add('active');
});
}
clearDots() {
this.stage.innerHTML = '';
this.dots = [];
}
}
document.addEventListener('DOMContentLoaded', () => {
// 読み込み完了後にサイズ調整が確実に行われるようにする
window.addEventListener('resize', loader => {
// loaderがスコープ外なのでここでの実装は注意が必要。
// DotTextLoader内でresizeをlistenする方がクリーンだが、
// 今回は既存のコード構造を維持して下に修正を入れる。
});
// オプション指定を削除し、クラス内のデフォルト設定（gridGap, fontSize）を使用するように変更
const loader = new DotTextLoader('container');
loader.initDots("LOADING");
let isTextState = true;
const morphLoop = () => {
if (isTextState) {
loader.formEmoji();
isTextState = false;
setTimeout(morphLoop, 3000);
} else {
loader.formText();
isTextState = true;
setTimeout(morphLoop, 3000);
}
};
setTimeout(morphLoop, 2000);
// リサイズ時のちらつき（ドット再生成）を防ぎ、スケール調整のみにする
let timeoutId;
window.addEventListener('resize', () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
loader.updateScale();
}, 100);
});
});</script></body></html>
猫顔風のSVGローディングアニメーション
猫のシルエットパス上をドットが周回するSVGローディングアニメーション。prefers-reduced-motionに対応。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">:root{
color-scheme: dark;
--bg: #0b0b0b;
--outline: rgba(255,255,255,0.42);
--accent: rgba(255,255,255,0.95);
--size: clamp(14rem, 40vmin, 22rem);
--speed: 3s;
/* pathLength=100 を基準にしたドット設計（dot+gap の合計で個数が決まる） */
--dot-count: 40;
--dot-size: 10;
--active-size:13;
--dot-phase: 0;
/* グラデ風（先頭が濃く、後ろが薄い） */
--trail: 38;
--alpha-min: 0.01;
--alpha-max: 0.95;
/* サイズもグラデ風（先頭が大きく、後ろが小さい） */
--scale-min: 0.35;
--scale-max: 1;
}
html,body{height:100%;}
body{
margin:0;
background: radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,0.06), transparent 55%), var(--bg);
display:grid;
place-items:center;
overflow:hidden;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.spinner{
width: var(--size);
height: var(--size);
}
svg{display:block;width:100%;height:100%;}
.dot{
vector-effect: non-scaling-stroke;
fill: var(--accent);
opacity: var(--alpha-min);
}
.dotActive{
vector-effect: non-scaling-stroke;
fill: var(--accent);
color: var(--accent);
filter: drop-shadow(0 0 10px currentColor);
}
@media (prefers-reduced-motion: reduce){
.dotActive{ filter: none; }
}</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 507px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="spinner" aria-label="loading" role="img">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 315 294" xml:space="preserve">
<defs>
<path id="catPath" pathLength="100" d="
M48.818039,20.819481
C54.641541,23.650852 60.813469,25.544733 65.292236,29.403715
C77.629494,40.033707 89.620316,51.131927 101.005409,62.771461
C106.277580,68.161469 111.373672,69.673439 118.288834,67.756615
C134.634979,63.225597 151.361298,61.538990 168.209442,63.110565
C178.593155,64.079147 188.917114,66.123344 199.126694,68.336166
C204.065369,69.406570 207.488815,68.087280 210.754807,64.774933
C218.588013,56.830585 226.154434,48.582027 234.442444,41.139927
C241.461761,34.836990 248.975967,28.915340 256.934540,23.871708
C266.646240,17.717056 273.706940,20.222788 278.974915,30.514168
C286.973145,46.139305 288.669769,63.006226 287.371765,80.077843
C286.354065,93.462860 284.027344,106.764320 281.909119,120.043388
C280.737518,127.388237 280.692230,134.299988 283.145691,141.567368
C297.493805,184.068542 286.270691,220.394730 254.363388,250.365692
C226.311569,276.715118 191.875809,287.380798 153.758560,286.627411
C114.449486,285.850464 79.966713,272.900482 52.915039,243.761566
C24.860287,213.542191 17.585888,178.369827 31.361925,139.319672
C33.731373,132.603134 33.362537,126.185844 31.796259,119.731323
C26.721684,98.819397 24.626087,77.596947 27.343390,56.319523
C28.556398,46.821232 32.569111,37.553185 36.209583,28.543653
C38.152164,23.736118 42.294483,20.163218 48.818039,20.819481
z"></path>
</defs>
<g id="cat">
<g id="dotsBase" aria-hidden="true"></g>
<circle id="dotActive" class="dotActive" r="4.5" cx="0" cy="0"></circle>
</g>
</svg>
</div>
<script id="js-section">(() => {
const root = document.documentElement;
const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
const svg = document.querySelector('svg');
const path = document.getElementById('catPath');
const dotsBase = document.getElementById('dotsBase');
const dotActive = document.getElementById('dotActive');
if (!svg || !path || !dotsBase || !dotActive) return;
const readNumberVar = (name, fallback) => {
const raw = getComputedStyle(root).getPropertyValue(name).trim();
const n = Number.parseFloat(raw);
return Number.isFinite(n) ? n : fallback;
};
const dotCount = Math.max(3, Math.round(readNumberVar('--dot-count', 20)));
const activeSize = Math.max(1, readNumberVar('--active-size', 9));
const phase = readNumberVar('--dot-phase', 0);
const durationMs = Math.max(200, readNumberVar('--speed', 4) * 1000);
const trail = Math.max(2, Math.round(readNumberVar('--trail', Math.min(12, Math.floor(dotCount / 2)))));
const alphaMin = Math.min(1, Math.max(0, readNumberVar('--alpha-min', 0.12)));
const alphaMax = Math.min(1, Math.max(0, readNumberVar('--alpha-max', 0.95)));
const scaleMin = Math.min(1, Math.max(0.05, readNumberVar('--scale-min', 0.35)));
const scaleMax = Math.min(1.5, Math.max(scaleMin, readNumberVar('--scale-max', 1)));
const total = path.getTotalLength();
const phaseLen = (phase / 100) * total;
const points = Array.from({ length: dotCount }, (_, i) => {
const t = (i / dotCount) * total + phaseLen;
return path.getPointAtLength((t % total + total) % total);
});
while (dotsBase.firstChild) dotsBase.removeChild(dotsBase.firstChild);
const dots = [];
for (const pt of points) {
const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('class', 'dot');
c.setAttribute('cx', String(pt.x));
c.setAttribute('cy', String(pt.y));
c.setAttribute('r', String((activeSize / 2) * scaleMin));
dotsBase.appendChild(c);
dots.push(c);
}
dotActive.setAttribute('r', String(activeSize / 2));
const setActiveIndex = (idx) => {
const activeIndex = (idx % dotCount + dotCount) % dotCount;
const pt = points[activeIndex];
dotActive.setAttribute('cx', String(pt.x));
dotActive.setAttribute('cy', String(pt.y));
const denom = Math.max(1, trail - 1);
for (let i = 0; i < dots.length; i++) {
if (i === activeIndex) {
// dotActive と二重に濃くならないようにベース側は消す
dots[i].style.opacity = '0';
dots[i].setAttribute('r', String((activeSize / 2) * scaleMin));
continue;
}
const d = (activeIndex - i + dotCount) % dotCount; // 1が直後（尾の1つ目）
if (d >= 1 && d <= trail) {
const t = 1 - (d - 1) / denom;
const a = alphaMin + (alphaMax - alphaMin) * t;
dots[i].style.opacity = String(a);
const s = scaleMin + (scaleMax - scaleMin) * t;
dots[i].setAttribute('r', String((activeSize / 2) * s));
} else {
dots[i].style.opacity = String(alphaMin);
dots[i].setAttribute('r', String((activeSize / 2) * scaleMin));
}
}
};
setActiveIndex(0);
if (reduceMotion) return;
const stepMs = durationMs / dotCount;
let lastStep = -1;
const start = performance.now();
const tick = (now) => {
const elapsed = now - start;
const step = Math.floor(elapsed / stepMs);
if (step !== lastStep) {
lastStep = step;
setActiveIndex(step);
}
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
})();</script></body></html>
肉球のプログレスバーアニメーション
肉球の足跡が左右交互に現れるプログレスバーアニメーション。立体感のある肉球が歩くような表示されます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Paw Track Container */
.paw-track {
display: flex;
align-items: center;
gap: 20px;
position: relative;
height: 40px;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 0.5px,
rgba(0,0,0,0.015) 0.5px,
rgba(0,0,0,0.015) 1px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 0.5px,
rgba(0,0,0,0.015) 0.5px,
rgba(0,0,0,0.015) 1px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 1px,
rgba(0,0,0,0.01) 1px,
rgba(0,0,0,0.01) 2px
),
linear-gradient(
to bottom,
#c5c5c5,
#b8b8b8,
#acacac
);
padding: 10px 20px;
}
/* Individual Paw Print */
.paw {
width: 30px;
height: 30px;
transform: scale(0);
filter:
drop-shadow(-2px -2px 4px rgba(0,0,0,0.25))
drop-shadow(2px 2px 4px rgba(255,255,255,0.6));
animation: pawAppear 0.3s ease-out forwards;
position: relative;
}
.paw svg {
width: 100%;
height: 100%;
fill: #5a5a5a;
transform: rotate(90deg);
}
/* Paw Animation */
@keyframes pawAppear {
0% {
opacity: 0;
transform: scale(0.3);
}
40% {
opacity: 1;
}
70% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
/* Left paw (top position) */
.paw.left {
align-self: flex-start;
margin-top: -4px;
}
/* Right paw (bottom position) */
.paw.right {
align-self: flex-end;
margin-bottom: -4px;
}</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 507px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="pic-container">
<div class="paw-track" id="pawTrack"></div>
</div>
<script id="js-section">// SVG path for paw print
const PAW_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M180-475q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180-160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm240 0q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180 160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM266-75q-45 0-75.5-34.5T160-191q0-52 35.5-91t70.5-77q29-31 50-67.5t50-68.5q22-26 51-43t63-17q34 0 63 16t51 42q28 32 49.5 69t50.5 69q35 38 70.5 77t35.5 91q0 47-30.5 81.5T694-75q-54 0-107-9t-107-9q-54 0-107 9t-107 9Z"/>
</svg>
`;
const pawTrack = document.getElementById('pawTrack');
const pawCount = 8;
const baseDelay = 0.3;
// Create paws with alternating left/right positions
for (let i = 0; i < pawCount; i++) {
const paw = document.createElement('div');
paw.className = i % 2 === 0 ? 'paw left' : 'paw right';
paw.innerHTML = PAW_SVG;
// Last paw gets a slightly longer delay
paw.style.animationDelay =
i === pawCount - 1
? `${i * baseDelay + 0.15}s`
: `${i * baseDelay}s`;
pawTrack.appendChild(paw);
}</script></body></html>
スーパーマリオ風 ゲームウォッチローディングアニメーション
ドット絵のマリオがブロックを叩いてジャンプする、Game & Watch風のレトロなローディングアニメーション。CSS box-shadowでピクセルアートを描き、ゲーム機らしい雰囲気も作る
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><script src="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" class="manual-link"></script><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style><script src="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" class="manual-link"></script><style id="out-style">:root {
--pixel-size: 3px;
--bg-color: #5c94fc;
--ground-height: 48px;
--block-size: 24px;
--question-block-size: calc(var(--pixel-size) * 16);
--question-block-bottom: 95px;
--gw-face-gradient-start: #e8e8e8;
--gw-face-gradient-end: #bfbfbf;
--gw-accent-border: #b0192b;
}
body {
background-color: #222;
margin: 0;
overflow: hidden;
font-family: 'Press Start 2P', cursive;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Game & Watch 本体 */
.gamewatch {
width: 800px;
height: 480px;
background: linear-gradient(135deg, var(--gw-face-gradient-start) 0%, var(--gw-face-gradient-end) 100%);
border-radius: 40px;
border: 10px solid var(--gw-accent-border);
box-shadow:
inset 3px 3px 6px rgba(255,255,255,0.4),
inset -3px -3px 6px rgba(0,0,0,0.3),
0 20px 50px rgba(0,0,0,0.6);
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 30px 50px;
box-sizing: border-box;
}
/* 左サイド (十字キー) */
.left-side {
width: 120px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
position: relative;
z-index: 10;
padding-bottom: 40px;
}
.d-pad {
--dpad-size: 110px;
--dpad-thickness: 36px;
--dpad-arm: calc((var(--dpad-size) - var(--dpad-thickness)) / 2);
width: var(--dpad-size);
height: var(--dpad-size);
position: relative;
}
.dpad-part {
background-color: #222;
position: absolute;
box-sizing: border-box;
border-style: solid;
border-color: var(--gw-accent-border);
border-width: 0;
}
.dpad-shadow {
box-shadow: 3px 3px 5px rgba(0,0,0,0.4), inset 1px 1px 2px rgba(255,255,255,0.1);
}
.dpad-up {
width: var(--dpad-thickness);
height: var(--dpad-arm);
left: var(--dpad-arm);
top: 0;
border-top-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.dpad-down {
width: var(--dpad-thickness);
height: var(--dpad-arm);
left: var(--dpad-arm);
bottom: 0;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dpad-left {
width: var(--dpad-arm);
height: var(--dpad-thickness);
left: 3px;
top: var(--dpad-arm);
border-left-width: 3px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.dpad-right {
width: var(--dpad-arm);
height: var(--dpad-thickness);
right: 3px;
top: var(--dpad-arm);
border-right-width: 3px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.dpad-center {
width: var(--dpad-thickness);
height: var(--dpad-thickness);
left: var(--dpad-arm);
top: var(--dpad-arm);
background-color: #222;
box-shadow: none;
border-width: 0;
z-index: -1;
}
/* 中央エリア (画面・ロゴ) */
.center-area {
flex-grow: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 30px;
position: relative;
}
.screen-container {
width: 100%;
flex-grow: 1;
background-color: #2a2a2a;
border-radius: 15px;
padding: 25px;
box-shadow:
inset 3px 3px 8px rgba(0,0,0,0.5),
0 3px 8px rgba(255,255,255,0.2);
position: relative;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
.screen-display {
width: 100%;
height: 100%;
background-color: var(--bg-color);
box-shadow: inset 4px 4px 15px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
border-radius: 4px;
}
.gw-logo-plate {
position: absolute;
top: 30px;
left: 50px;
width: 110px;
height: 110px;
background: #fff;
border: 2px solid #333;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: none;
z-index: 20;
}
.gw-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.3;
text-align: center;
color: #000;
font-weight: normal;
font-style: italic;
}
/* 右サイド (ボタン) */
.right-side {
width: 120px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 10;
padding-top: 0px;
padding-bottom: 10px;
}
.mode-buttons {
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
}
.mode-btn-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.mode-btn {
width: 56px;
height: 28px;
background: linear-gradient(135deg, #f6f6f6 0%, #d7d7d7 100%);
border-radius: 14px;
box-shadow: 2px 3px 5px rgba(0,0,0,0.35), inset 1px 1px 2px rgba(255,255,255,0.75);
cursor: pointer;
border: 3px solid var(--gw-accent-border);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mode-label {
font-family: sans-serif;
font-size: 9px;
color: #2a2a2a;
font-weight: bold;
white-space: nowrap;
text-transform: uppercase;
}
.action-btn-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: auto;
margin-bottom: 0;
}
.action-btn {
width: 90px;
height: 90px;
background-color: #b92e2e;
border-radius: 50%;
border: 6px solid var(--gw-accent-border);
box-shadow: 4px 4px 8px rgba(0,0,0,0.4), inset 3px 3px 6px rgba(255,255,255,0.2);
cursor: pointer;
}
.action-btn:active {
box-shadow: 2px 2px 4px rgba(0,0,0,0.4), inset 2px 2px 5px rgba(0,0,0,0.2);
transform: translateY(3px);
}
.action-label {
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
color: #4a3b2a;
}
/* マリオアニメーション */
.scene {
position: absolute;
bottom: var(--ground-height);
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: none;
}
.mario {
width: var(--pixel-size);
height: var(--pixel-size);
background-color: transparent;
position: absolute;
bottom: calc(var(--pixel-size) * -1);
left: 58%;
margin-left: calc(var(--pixel-size) * -6);
z-index: 10;
transform: scaleX(-1);
--mario-sprite-run:
/* 帽子 (赤) */
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * -10) 0 0 #d9001b,
/* 顔 (肌色) */
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -7) 0 0 #fca044,
/* 髭/目/髪 */
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -9) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -8) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -7) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -7) 0 0 #462203,
/* 胴体 (赤) */
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -5) 0 0 #d9001b,
/* オーバーオール (青) */
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
/* 手 (肌色) */
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -5) 0 0 #fca044,
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -4) 0 0 #fca044,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -5) 0 0 #fca044,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -4) 0 0 #fca044,
/* 足 (茶) */
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -1) 0 0 #462203;
--mario-sprite-jump:
/* ジャンプ時は手の位置が変わる */
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -11) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * -10) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -9) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -9) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -8) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -7) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -7) 0 0 #462203,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -6) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -5) 0 0 #d9001b,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -4) 0 0 #1f40bf,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -3) 0 0 #1f40bf,
/* 手の位置変更 */
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -8) 0 0 #fca044,
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -7) 0 0 #fca044,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * -6) 0 0 #fca044,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * -5) 0 0 #fca044,
/* 足 */
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -2) 0 0 #462203,
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * -1) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * -1) 0 0 #462203;
box-shadow: var(--mario-sprite-run);
transform-origin: center bottom;
}
.mario.jump {
animation: marioJump 1.2s cubic-bezier(0.35, 0, 0.45, 1) infinite;
}
@keyframes marioJump {
0% { transform: translateY(0) scaleX(-1); box-shadow: var(--mario-sprite-run); }
45% { transform: translateY(-60px) scaleX(-1); box-shadow: var(--mario-sprite-jump); }
55% { transform: translateY(-60px) scaleX(-1); box-shadow: var(--mario-sprite-jump); }
100% { transform: translateY(0) scaleX(-1); box-shadow: var(--mario-sprite-run); }
}
.block {
width: var(--question-block-size);
height: var(--question-block-size);
background-color: #fca044;
position: absolute;
bottom: var(--question-block-bottom);
left: 50%;
transform: translateX(-50%);
z-index: 5;
box-shadow: inset -2px -2px 0px rgba(0,0,0,0.3), 2px 2px 0px rgba(0,0,0,0.5);
}
.block::after {
content: '';
position: absolute;
width: var(--pixel-size);
height: var(--pixel-size);
top: 0;
left: 0;
background: transparent;
box-shadow:
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 1) 0 0 #462203,
calc(var(--pixel-size) * 14) calc(var(--pixel-size) * 1) 0 0 #462203,
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 14) 0 0 #462203,
calc(var(--pixel-size) * 14) calc(var(--pixel-size) * 14) 0 0 #462203,
calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 3) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 3) 0 0 #462203,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 3) 0 0 #462203,
calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 3) 0 0 #462203,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 4) 0 0 #462203,
calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 4) 0 0 #462203,
calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 5) 0 0 #462203,
calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 5) 0 0 #462203,
calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 6) 0 0 #462203,
calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 7) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 8) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 9) 0 0 #462203,
calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 12) 0 0 #462203;
}
.block.hit {
animation: blockBump 0.2s ease-out;
}
@keyframes blockBump {
0% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -5px); }
100% { transform: translate(-50%, 0); }
}
.loading-popup {
position: absolute;
bottom: calc(var(--question-block-bottom) + var(--question-block-size));
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
white-space: nowrap;
text-shadow: 1px 1px 0px #000;
z-index: 4;
opacity: 0;
pointer-events: none;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.loading-popup.active {
animation: textUp 0.8s ease-out forwards;
}
@keyframes textUp {
0% {
transform: translate(-50%, 18px) scale(0.65);
opacity: 1;
z-index: 4;
}
30% {
transform: translate(-50%, -10px) scale(1.1);
z-index: 10;
}
100% {
transform: translate(-50%, -55px) scale(1);
opacity: 0;
z-index: 10;
}
}
.ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--ground-height);
background-color: #c84c0c;
background-image:
linear-gradient(to right, #5c2c06 1px, transparent 1px),
linear-gradient(to bottom, #5c2c06 1px, transparent 1px),
linear-gradient(135deg, #ffccaa 25%, transparent 25%),
linear-gradient(-45deg, #7a3005 25%, transparent 25%);
background-size: var(--block-size) var(--block-size);
background-position: 0 0;
border-top: 1px solid #000;
box-shadow: inset 0 2px 0 rgba(0,0,0,0.1);
z-index: 20;
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 900px; height: 507px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="gamewatch">
<!-- 左サイド (十字キー) -->
<div class="left-side">
<div class="d-pad">
<div class="dpad-part dpad-right dpad-shadow"></div>
<div class="dpad-part dpad-down dpad-shadow"></div>
<div class="dpad-part dpad-up"></div>
<div class="dpad-part dpad-right"></div>
<div class="dpad-part dpad-down"></div>
<div class="dpad-part dpad-left"></div>
<div class="dpad-part dpad-center"></div>
</div>
</div>
<!-- 中央エリア (画面・ロゴ) -->
<div class="center-area">
<div class="screen-container">
<div class="screen-display">
<div class="scene">
<div class="block" id="block"></div>
<div class="loading-popup" id="popup">LOADING</div>
<div class="mario jump"></div>
</div>
<div class="ground"></div>
</div>
</div>
</div>
<!-- 左上ロゴプレート -->
<div class="gw-logo-plate">
<div class="gw-text">LOAD<br>&<br>WATCH</div>
</div>
<!-- 右サイド (ボタン) -->
<div class="right-side">
<div class="mode-buttons">
<div class="mode-btn-group">
<div class="mode-btn"></div>
<div class="mode-label">GAME</div>
</div>
<div class="mode-btn-group">
<div class="mode-btn"></div>
<div class="mode-label">TIME</div>
</div>
<div class="mode-btn-group">
<div class="mode-btn"></div>
<div class="mode-label">PAUSE/RESET</div>
</div>
</div>
<div class="action-btn-container">
<div class="action-btn"></div>
<div class="action-label">JUMP</div>
</div>
</div>
</div>
<script id="js-section">const block = document.getElementById('block');
const popup = document.getElementById('popup');
setInterval(() => {
setTimeout(() => {
hitBlock();
}, 540);
}, 1200);
function hitBlock() {
block.classList.remove('hit');
void block.offsetWidth;
block.classList.add('hit');
popup.classList.remove('active');
void popup.offsetWidth;
popup.classList.add('active');
}
setTimeout(() => hitBlock(), 540);</script></body></html>
オセロ式ローディングアニメーション
オセロの反転ルールを活用した、LOADINGテキストが順次表示されるローディングアニメーション
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
}
.container {
text-align: center;
}
.board {
display: inline-grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 2px;
background: #0f3460;
padding: 10px;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
0 0 60px rgba(22, 160, 133, 0.15);
}
.cell {
width: 50px;
height: 50px;
background: #16a085;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.stone {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
transition: background-color 0.4s ease, transform 0.4s ease;
}
.stone.black {
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
color: white;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.1);
}
.stone.white {
background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
0 4px 8px rgba(0, 0, 0, 0.15),
inset 0 -2px 4px rgba(0, 0, 0, 0.1),
inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.stone .letter {
opacity: 0;
transition: opacity 0.2s ease;
}
.stone.show-letter .letter {
opacity: 1;
}
@keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}
.stone.flip {
animation: flip 0.4s ease;
}
@keyframes placeStone {
0% {
transform: scale(0);
opacity: 0;
}
50% { transform: scale(1.2); }
100% {
transform: scale(1);
opacity: 1;
}
}
.stone.placing {
animation: placeStone 0.5s ease;
}
@keyframes stonePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.9); }
}
.stone.stone-pulse {
animation: stonePulse 0.6s ease;
}</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 507px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="container">
<div class="board" id="board"></div>
</div>
<script id="js-section">const board = document.getElementById('board');
const BOARD_SIZE = 8;
const HORIZONTAL_POSITIONS = [
{row: 0, col: 0}, // L
{row: 0, col: 1}, // O
{row: 0, col: 2}, // A
{row: 0, col: 3}, // D
{row: 0, col: 4}, // I
{row: 0, col: 5}, // N
{row: 0, col: 6}, // G
{row: 0, col: 7} // ...
];
const letters = ['L', 'O', 'A', 'D', 'I', 'N', 'G', '...'];
let cells = [];
function createBoard() {
board.innerHTML = '';
cells = [];
for (let row = 0; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE; col++) {
const cell = document.createElement('div');
cell.className = 'cell';
const stone = document.createElement('div');
stone.className = 'stone';
const letter = document.createElement('span');
letter.className = 'letter';
stone.appendChild(letter);
if (row === 0 && col === 0) {
stone.style.display = 'none';
} else if (row === 0 && col >= 1 && col <= 6) {
stone.classList.add('white');
} else {
stone.classList.add('black');
}
cell.appendChild(stone);
board.appendChild(cell);
cells.push({ cell, stone, letter });
}
}
}
async function animate() {
createBoard();
await sleep(800);
// 黒石を置く
const placeIndex = 0;
const placeStone = cells[placeIndex].stone;
const placeLetter = cells[placeIndex].letter;
placeStone.style.display = 'flex';
placeStone.classList.add('black', 'placing', 'show-letter');
placeLetter.textContent = letters[0];
await sleep(500);
// 横一列を反転
for (let i = 1; i <= 6; i++) {
const hPos = HORIZONTAL_POSITIONS[i];
const hIndex = hPos.row * BOARD_SIZE + hPos.col;
const hStone = cells[hIndex].stone;
const hLetter = cells[hIndex].letter;
hLetter.textContent = letters[i];
hStone.classList.add('flip');
await sleep(200);
hStone.classList.remove('white');
hStone.classList.add('black', 'show-letter');
await sleep(350);
}
await sleep(300);
// ...を段階的に表示
const lastIndex = 7;
const lastStone = cells[lastIndex].stone;
const lastLetter = cells[lastIndex].letter;
lastLetter.innerHTML = '<span class="dot" style="opacity: 0;">.</span><span class="dot" style="opacity: 0;">.</span><span class="dot" style="opacity: 0;">.</span>';
lastStone.classList.add('show-letter');
const dots = lastLetter.querySelectorAll('.dot');
dots[0].style.opacity = '1';
await sleep(200);
dots[1].style.opacity = '1';
await sleep(200);
dots[2].style.opacity = '1';
await sleep(1000);
// パルス効果
for (let row = 0; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE; col++) {
const idx = row * BOARD_SIZE + col;
cells[idx].stone.classList.add('stone-pulse');
}
}
await sleep(600);
for (let row = 1; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE; col++) {
const idx = row * BOARD_SIZE + col;
cells[idx].stone.classList.remove('stone-pulse');
}
}
await sleep(1000);
animate();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
createBoard();
animate();</script></body></html>
グラデーションバー
鮮やかなグラデーションで視覚的にインパクトのあるバーです。`translateX`で位置を変化させます。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-gradient {
width: 50%;
height: 20px;
background: #f0fdf4;
border-radius: 5px;
overflow: hidden;
}
.progress-bar-gradient {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(7, 174, 234), rgba(43, 245, 152));
border-radius: 5px;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
transform: translateX(-100%);
animation: progress-gradient 10s ease-in-out infinite;
}
@keyframes progress-gradient {
0% {
transform: translateX(-100%);
}
70% {
transform: translateX(0%);
}
100% {
transform: translateX(0%);
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-gradient">
<div class="progress-bar-gradient"></div>
</div>
</div></body></html>
ニューモフィズム風バー
凹凸を影で表現した、立体的なニューモフィズムデザインのバーです。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
body{
background: #e5e7eb;
}
.progress-container-pulse {
width: 50%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.6),
-8px -8px 16px rgba(255, 255, 255, 0.8);
}
.progress-bar-pulse {
height: 100%;
width: 0;
background: #e5e7eb;
border-radius: 10px;
box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.4),
inset -4px -4px 8px rgba(255, 255, 255, 0.5);
animation: pulse-progress 10s ease-in-out infinite;
}
@keyframes pulse-progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-pulse">
<div class="progress-bar-pulse"></div>
</div>
</div></body></html>
ボックス式プログレスバー
10個のボックスが順番に塗りつぶされていくステップ式のバーです。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-neon {
width: 50%;
height: 20px;
background: #4b5563;
border-radius: 5px;
padding: 4px;
position: relative;
}
.progress-container-neon::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: linear-gradient(
90deg,
transparent 0%, transparent 10%,
#4b5563 10%, #4b5563 calc(10% + 2px),
transparent calc(10% + 2px), transparent 20%,
#4b5563 20%, #4b5563 calc(20% + 2px),
transparent calc(20% + 2px), transparent 30%,
#4b5563 30%, #4b5563 calc(30% + 2px),
transparent calc(30% + 2px), transparent 40%,
#4b5563 40%, #4b5563 calc(40% + 2px),
transparent calc(40% + 2px), transparent 50%,
#4b5563 50%, #4b5563 calc(50% + 2px),
transparent calc(50% + 2px), transparent 60%,
#4b5563 60%, #4b5563 calc(60% + 2px),
transparent calc(60% + 2px), transparent 70%,
#4b5563 70%, #4b5563 calc(70% + 2px),
transparent calc(70% + 2px), transparent 80%,
#4b5563 80%, #4b5563 calc(80% + 2px),
transparent calc(80% + 2px), transparent 90%,
#4b5563 90%, #4b5563 calc(90% + 2px),
transparent calc(90% + 2px), transparent 100%
);
pointer-events: none;
z-index: 2;
}
.progress-bar-neon {
height: 100%;
width: 0%;
background: #e8ab5b;
border-radius: 2px;
animation: neon-progress 10s infinite steps(10);
}
@keyframes neon-progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-neon">
<div class="progress-bar-neon"></div>
</div>
</div></body></html>
HP回復風のバー
ゲームのHP回復をイメージした、赤から緑へ変化するバーです。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-hp {
width: 50%;
height: 20px;
background: #fca5a5;
border-radius: 8px;
border: 2px solid #374151;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.progress-bar-hp {
height: 100%;
width: 0;
background: #a4f9a4;
animation: hp-recovery 10s ease-in-out infinite;
}
@keyframes hp-recovery {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-hp">
<div class="progress-bar-hp"></div>
</div>
</div></body></html>
LOADINGが表示されるバー
緑色のバーが進行し、その上に「LOADING...」テキストが徐々に表示されるバーです。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-text {
width: 50%;
height: 25px;
background: #f3f4f6;
border-radius: 5px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.progress-bar-text {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 5px;
animation: text-progress 10s ease-in-out infinite;
}
.progress-label {
position: relative;
font-weight: bold;
font-size: 14px;
letter-spacing: 2px;
z-index: 10;
color: #f3f4f6;
}
@keyframes text-progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-text">
<div class="progress-bar-text"></div>
<span class="progress-label">LOADING...</span>
</div>
</div></body></html>
角丸バー
角を丸めた柔らかい印象のバーです。モダンで優しい見た目に仕上がります。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-rounded {
width: 50%;
height: 20px;
background: #ffffff;
border: 2px solid #4b5563;
border-radius: 10px;
overflow: hidden;
}
.progress-bar-rounded {
height: 100%;
width: 0;
background: linear-gradient(90deg, #6b7280, #4b5563);
animation: progress-rounded 10s ease-in-out infinite;
}
@keyframes progress-rounded {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-rounded">
<div class="progress-bar-rounded"></div>
</div>
</div></body></html>
両端を傾けたバー
transform: skewXで傾けた、ダイナミックな印象のバーです。スピード感を演出します。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-skew {
width: 50%;
height: 20px;
background: #f3f4f6;
border: 2px solid #6b7280;
transform: skewX(-15deg);
overflow: hidden;
}
.progress-bar-skew {
height: 100%;
width: 0;
background: linear-gradient(90deg, #6b7280, #4b5563);
animation: progress-skew 10s ease-in-out infinite;
}
@keyframes progress-skew {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-skew">
<div class="progress-bar-skew"></div>
</div>
</div></body></html>
影付きバー
控えめな影を追加したバーです。立体感を出して、より視覚的にわかりやすくします。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-stripe {
width: 50%;
height: 20px;
background: #f9fafb;
border-radius: 5px;
}
.progress-bar-stripe {
height: 100%;
width: 0;
background: #4b5563;
border-radius: 5px;
box-shadow: 4px 4px 8px rgba(75, 85, 99, 0.4);
animation: stripe-progress 10s ease-in-out infinite;
}
@keyframes stripe-progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-stripe">
<div class="progress-bar-stripe"></div>
</div>
</div></body></html>
枠線で囲まれたバー
太めの枠線とパディングで、内側にバーが進行するデザインです。
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container-multi {
width: 50%;
height: 20px;
background: transparent;
border: 4px solid #4b5563;
border-radius: 5px;
overflow: hidden;
padding: 10px;
}
.progress-bar-multi {
height: 100%;
width: 0;
background: linear-gradient(90deg, #6b7280, #4b5563);
border-radius: 3px;
animation: multi-progress 10s ease-in-out infinite;
}
@keyframes multi-progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<div class="progress-container-multi">
<div class="progress-bar-multi"></div>
</div>
</div></body></html>
基本のシンプルバー
シンプルでミニマルなプログレスバーです。グレーの配色で落ち着いた印象を与えます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.progress-container {
width: 50%;
height: 20px;
background: #ffffff;
border: 2px solid #4b5563;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0;
background: linear-gradient(90deg, #6b7280, #4b5563);
animation: progress 10s ease-in-out infinite;
}
@keyframes progress {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
}</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="pic-container">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>
</body></html>
GSAPで実装！一文字ずつ上下に動くローディングアニメーション
GSAPでの「y: "5px"」で上に移動させ「yoyo: true」でもとに戻し上下に波のように動くアニメーションにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" class="manual-link"></script><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#loading-text {
font-size: 26px;
text-transform: uppercase;
font-weight: bold;
}
#loading-text span{
display: inline-block;
}
</style><style id="pic-style"></style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="contents">
<div id="loading-text"></div>
</div>
<script id="js-section">// 一文字ずつ分割し配列に設定
const loadingText = document.getElementById("loading-text");
const letters = "loading...".split("");
//各文字をspanで囲む
letters.forEach(letter => {
const span = document.createElement("span");
span.textContent = letter;
loadingText.appendChild(span);
});
// gsapで、文字が上下に波のように動くよう設定
gsap.to("#loading-text span", {
duration: 0.5,
y: "5px",
ease: "power1.inOut",
stagger: {
each: 0.1,
yoyo: true,
repeat: -1
}
});
</script></body></html>
GSAPで実装！一文字ずつ縦に拡大するローディングアニメーション
GSAPで「scaleY:1.5」を指定し、１文字ずつ縦に拡大させてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" class="manual-link"></script><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#loading-text {
font-size: 26px;
text-transform: uppercase;
font-weight: bold;
}
#loading-text span {
display: inline-block;
}
</style><style id="pic-style"></style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="contents">
<div id="loading-text"></div>
</div>
<script id="js-section">// 一文字ずつ分割し配列に設定
const loadingText = document.getElementById("loading-text");
const letters = "loading...".split("");
//各文字をspanで囲む
letters.forEach(letter => {
const span = document.createElement("span");
span.textContent = letter;
loadingText.appendChild(span);
});
// gsapで、文字が上下に波のように動くよう設定
gsap.to("#loading-text span", {
duration: 0.7,
scaleY:1.5,
ease: "power1.inOut",
stagger: {
each: 0.2,
yoyo: true,
repeat: -1
}
});
</script></body></html>
GSAPで実装！一文字ずつ回転するローディングアニメーション
GSAPで「rotationY」を指定し、１文字ずつ１回転させてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" class="manual-link"></script><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#loading-text {
font-size: 26px;
text-transform: uppercase;
font-weight: bold;
}
#loading-text span {
display: inline-block;
transform-origin: center;
}
</style><style id="pic-style"></style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="contents">
<div id="loading-text"></div>
</div>
<script id="js-section">// 一文字ずつ分割し配列に設定
const loadingText = document.getElementById("loading-text");
const letters = "loading...".split("");
//各文字をspanで囲む
letters.forEach(letter => {
const span = document.createElement("span");
span.textContent = letter;
loadingText.appendChild(span);
});
// gsapで、span要素にアニメーションを適用
gsap.to("#loading-text span", {
duration: 1,
rotationY: 360,
repeat: -1,
ease: "linear",
stagger: 0.3
});
</script></body></html>
GSAPで実装！一文字ずつ表示されるローディングアニメーション
「span」タグに「opacity:0;」を設定し、GSAPで徐々に表示しています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" class="manual-link"></script><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#loading-text {
font-size: 26px;
text-transform: uppercase;
font-weight:bold;
}
#loading-text span {
opacity: 0;
}
</style><style id="pic-style"></style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="contents">
<div id="loading-text"></div>
</div>
<script id="js-section">// 一文字ずつ分割し配列に設定
const loadingText = document.getElementById("loading-text");
const letters = "loading...".split("");
//各文字をspanで囲む
letters.forEach(letter => {
const span = document.createElement("span");
span.textContent = letter;
loadingText.appendChild(span);
});
// gsapで、span要素にアニメーションを適用
gsap.to("#loading-text span", {
duration: 1,
opacity: 1,
stagger: 0.2,
ease: "power2.inOut",
repeat:-1
});
</script></body></html>
落ち葉が風で舞うローディングアニメーション
keyframesで「translate」と「rotate」を変化させ風で舞ったようなアニメーションにしています。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
position: relative;
background-image:
url("https://pa-tu.work/storage/img/posts/65422eed4e578.jpg");
background-size: cover;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #fff;
}
.leaf {
position: absolute;
height: 10px;
bottom: 50%;
left: 45%;
fill: #D0A25C;
animation: floatLeaf 4s infinite ease-in-out;
}
.loading-text {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
color: #fff;
text-transform: uppercase;
}
@keyframes floatLeaf {
0% {
transform: translate(-10px, 0) rotateX(280deg);
}
25% {
transform: translate(-5px, -50px) rotateY(180deg);
}
50% {
transform: translate(0, -100px) rotateX(-180deg);
}
75% {
transform: translate(10px, -50px) rotateX(135deg);
}
100% {
transform: translate(30px, 25px) rotateX(-140deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<svg class="leaf" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M0 32c477.6 0 366.6 317.3 367.1 366.3L448 480h-26l-70.4-71.2c-39 4.2-124.4 34.5-214.4-37C47 300.3 52 214.7 0 32zm79.7 46c-49.7-23.5-5.2 9.2-5.2 9.2 45.2 31.2 66 73.7 90.2 119.9 31.5 60.2 79 139.7 144.2 167.7 65 28 34.2 12.5 6-8.5-28.2-21.2-68.2-87-91-130.2-31.7-60-61-118.6-144.2-158.1z"></path>
</svg>
<p class="loading-text">loading...
</p></div>
<script id="js-section">
</script></body></html>
borderプロパティを使用！縦横の順に拡大するCSSローディングアニメーション
要素の幅高さを20pxにして、keyframesで要素の幅高さを変更してます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 20px;
height: 20px;
background-color: #000;
animation: loadingAnime 2s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
30%,50%{
width: 20px;
height: 50px;
}
70%,90% {
width: 50px;
height: 50px;
}
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
四角枠が縦横に回転するCSSローディングアニメーション
「rotateX」「rotateY」で回転させてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loading-item {
position: relative;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #353535;
box-sizing: border-box;
animation: spin 3s infinite;
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
25% {
transform: rotateX(180deg);
}
50% {
transform: rotateX(360deg) rotateY(0deg);
}
75% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loading-item"></div>
</div>
</div>
</body></html>
要素が斜めに変形するCSSローディングアニメーション
keyframesに「skewX」「skewY」を指定し変形させてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loading-item {
position: relative;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #353535;
box-sizing: border-box;
animation: loadingAnime 1s infinite;
}
@keyframes loadingAnime {
0% { transform:skewX(0); }
25% { transform:skewX(20deg); }
50% { transform:skewY(0); }
75% { transform:skewY(20deg); }
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loading-item"></div>
</div>
</div>
</body></html>
境界線の色を変えたCSSローディングアニメーション
keyframesで「border-color」を一つずつ変化させてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loading-item {
width: 0;
height: 0;
border: 25px solid #353535;
border-top-color: #efefef;
border-radius: 5px;
background-color: #353535;
box-sizing: border-box;
animation: loadingAnime 3s infinite;
}
@keyframes loadingAnime {
0% {
border-color: #353535;
border-top-color: #efefef;
}
25% {
border-color: #353535;
border-right-color: #efefef;
}
50% {
border-color: #353535;
border-bottom-color: #efefef;
}
75% {
border-color: #353535;
border-left-color: #efefef;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loading-item"></div>
</div>
</div>
</body></html>
境界線の色を変えたCSSローディングアニメーション
keyframesで「border-color」を一つずつ変化させてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loading-item {
width: 0px;
height: 0px;
border: 25px double #353535;
border-top-color: #efefef;
border-radius: 5px;
background-color: #fff;
box-sizing: border-box;
animation: loadingAnime 3s infinite;
}
@keyframes loadingAnime {
0% {
border-color: #353535;
border-top-color: #efefef;
}
25% {
border-color: #353535;
border-right-color: #efefef;
}
50% {
border-color: #353535;
border-bottom-color: #efefef;
}
75% {
border-color: #353535;
border-left-color: #efefef;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loading-item"></div>
</div>
</div>
</body></html>
borderプロパティを使用！拡大し四つ角に分かれるCSSローディングアニメーション
要素の幅高さを0にして、borderプロパティに「dotted」を指定。keyframesで要素の幅高さを変更してます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 0px;
height: 0px;
border: 10px dashed;
background-color: #fff;
animation: loadingAnime 2s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
0%,20%{
width: 0px;
height: 0px;
}
60%,80%{
width:40px;
height:40px;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
borderプロパティを使用！中心から白背景が広がるCSSローディングアニメーション
要素の幅高さを0にして、borderプロパティで四角形を作り、keyframesでborderの幅、要素の幅高さを変更してます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 0px;
height: 0px;
border: 25px solid;
background-color: #fff;
animation: loadingAnime 1.5s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
80%,
100% {
width: 50px;
height: 50px;
border: 0px solid;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
borderプロパティを使用！4つの円形に分離するCSSローディングアニメーション
要素の幅高さを0にして、borderスタイルを「dotted」に設定。四角形を作り、keyframesで要素の幅高さを変更し回転させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 0px;
height: 0px;
border: 25px dotted;
background-color: #fff;
animation: loadingAnime 1.5s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
0%,
20% {
width: 0px;
height: 0px;
}
80%,
100% {
width: 20px;
height: 20px;
transform: rotate(90deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
borderプロパティを使用！4つの枠に分離するCSSローディングアニメーション
要素の幅高さを0にして、borderスタイルを「dashed」に設定。四角形を作り、keyframesでborder、要素の幅高さを変更し回転させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 0px;
height: 0px;
border: 25px dashed;
background-color: #fff;
animation: loadingAnime 1.5s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
0%,
20% {
width: 0px;
height: 0px;
}
80%,
100% {
width: 40px;
height: 40px;
border:15px dashed;
transform: rotate(90deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
四角枠から円形に変形して回転するCSSローディングアニメーション
keyframesで「transform:rotate」「border-radius:50%;」を指定し回転させながら円形にしてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 50px;
height: 50px;
background-color: #333;
animation: loadingAnime 1.5s infinite ease-in-out;
overflow: hidden;
}
@keyframes loadingAnime {
30%,
50% {
transform: rotate(90deg);
border-radius: 50%;
}
80%,
100% {
transform: rotate(180deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
四角枠が回転するCSSローディングアニメーション
keyframesで「transform:rotate」を指定し回転させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 50px;
height: 50px;
background-color: #333;
animation: loadingAnime 0.5s infinite ease-in-out;
overflow:hidden;
}
@keyframes loadingAnime {
50% {
transform: translateY(10px) scale(1,.9) rotate(45deg);
border-bottom-right-radius: 10px;
}
100% {
transform:rotate(180deg);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
四角枠が円形に変化するCSSローディングアニメーション
keyframesで「transform:scale」「border-radius:50%;」を指定し円形に変化させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
z-index: 0;
}
.loading-section {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.loadidng-item {
width: 50px;
height: 50px;
background-color: #333;
animation: loadingAnime 2s infinite ease-in-out;
}
@keyframes loadingAnime {
50% {
transform:scale(.7);
border-radius:50%;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="loading-section">
<div class="loadidng-item"></div>
</div>
</div>
</body></html>
プログレスバー型のローディングアニメーション
「linear-gradient」でバーの中の色を設定し、「background-size」を変化させてプログレスバーを移動させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #121212;
overflow: hidden;
}
.loading-area {
position: relative;
background-color: #535353;
background-image: linear-gradient(90deg, #f7f7f7 0 100%);
background-size: 0% 100%;
background-repeat: no-repeat;
border-radius: 7px;
width: 250px;
height: 10px;
animation: loading-anime 2s ease infinite;
}
@keyframes loading-anime {
10% {
background-size: 20% 100%;
}
40% {
background-size: 60% 100%;
}
70%,
100% {
background-size: 100% 100%;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="contents">
<div class="loading-area">
</div>
</div>
</body></html>
プログレスバー型のローディングアニメーション
「linear-gradient」でバーの中の色を設定し、「background-size」を変化させてプログレスバーを移動させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #121212;
overflow: hidden;
}
.loading-area {
position: relative;
outline:1px solid #ccc;
outline-offset:10px;
background-image:
repeating-linear-gradient(90deg, #e7e882 0 10px,transparent 10px 20px),
repeating-linear-gradient(90deg, #ccc 0 10px,transparent 10px 20px);
background-size: 0% 100%,100% 100%;
background-repeat: no-repeat;
width: 250px;
height: 30px;
animation: loading-anime 2s ease infinite;
}
@keyframes loading-anime {
70%,
100% {
background-size: 100% 100%,100% 100%;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="contents">
<div class="loading-area">
</div>
</div>
</body></html>
プログレスバー型のローディングアニメーション
「linear-gradient」でバーの中の色を設定し、「background-size」を変化させてプログレスバーを移動させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #121212;
overflow: hidden;
}
.loading-area {
position: relative;
background-image: radial-gradient(#ddd 40%, transparent 60%);
background-size: 30px 30px;
background-repeat: repeat;
width: 300px;
height: 30px;
}
.loading-area::before {
position: absolute;
inset: 0;
background-image: radial-gradient(#06d3d3 30%, transparent 35%);
background-size: 30px 30px;
background-repeat: repeat;
width: 0;
height: 100%;
content: '';
animation: loading-anime 2s ease infinite;
}
@keyframes loading-anime {
70%,
100% {
width: 100%;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="contents">
<div class="loading-area">
</div>
</div>
</body></html>
波のようなローディングアニメーション
「-webkit-background-clip: text;」で文字に背景色を設定。「background-size」をアニメーションに指定し高さを変化させて波のようにしています。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.contents {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
.loading-area {
display: flex;
justify-content: center;
gap: 3px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
}
.loading-area span {
display: inline-block;
background-color: #efefef;
background-image: linear-gradient(#37bcf8, #3989b2);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 20%;
background-position: center bottom;
background-repeat: no-repeat;
font-size: 2rem;
font-weight: bold;
animation: wave-anime 1.5s infinite linear;
text-transform: uppercase;
}
.loading-area span:nth-child(1) {
animation-delay: 0.1s;
}
.loading-area span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-area span:nth-child(3) {
animation-delay: 0.3s;
}
.loading-area span:nth-child(4) {
animation-delay: 0.4s;
}
.loading-area span:nth-child(5) {
animation-delay: 0.3s;
}
.loading-area span:nth-child(6) {
animation-delay: 0.2s;
}
.loading-area span:nth-child(7) {
animation-delay: 0.1s;
}
.loading-area span:nth-child(8) {
animation-delay: 0.2s;
}
.loading-area span:nth-child(9) {
animation-delay: 0.3s;
}
.loading-area span:nth-child(10) {
animation-delay: 0.4s;
}
@keyframes wave-anime {
50% {
background-size: 100% 90%;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="contents">
<div class="loading-area">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>
</body></html>