猫顔風の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>
水を注いだようなローディングアニメーション
「-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 0 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 0%;
background-position: center bottom;
background-repeat: no-repeat;
font-size: 2rem;
font-weight: bold;
animation: water-anime 2s infinite linear;
text-transform: uppercase;
}
.loading-area span:nth-child(1) {
animation-delay: 0.1s;
}
.loading-area span:nth-child(2) {
animation-delay: 0.14s;
}
.loading-area span:nth-child(3) {
animation-delay: 0.18s;
}
.loading-area span:nth-child(4) {
animation-delay: 0.22s;
}
.loading-area span:nth-child(5) {
animation-delay: 0.26s;
}
.loading-area span:nth-child(6) {
animation-delay: 0.3s;
}
.loading-area span:nth-child(7) {
animation-delay: 0.34s;
}
.loading-area span:nth-child(8) {
animation-delay: 0.38s;
}
.loading-area span:nth-child(9) {
animation-delay: 0.4s;
}
.loading-area span:nth-child(10) {
animation-delay: 0.44s;
}
@keyframes water-anime {
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">
<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>