スーパーマリオ風 ゲームウォッチローディングアニメーション
ドット絵のマリオがブロックを叩いてジャンプする、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>
波のようなローディングアニメーション
「-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(#17bcf8, #67bcf8);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 2%;
background-position: center;
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.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.5s;
}
.loading-area span:nth-child(6) {
animation-delay: 0.6s;
}
.loading-area span:nth-child(7) {
animation-delay: 0.7s;
}
.loading-area span:nth-child(8) {
animation-delay: 0.8s;
}
.loading-area span:nth-child(9) {
animation-delay: 0.9s;
}
.loading-area span:nth-child(10) {
animation-delay: 1s;
}
@keyframes water-anime {
50%,
70% {
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>
縦方向に縮むローディングアニメーション
keyframeで「scaleY」を指定し徐々に縮小するようにしています
<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: grid;
place-items: center;
width: 60%;
}
.loading-text {
color: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
transform: scaleY(1.5);
animation: zoomout 1.3s infinite linear;
}
@keyframes zoomout {
50% {
transform: scaleY(.95);
}
60% {
transform: scaleY(1.05);
}
70%,
100% {
transform: scaleY(1);
}
}
</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">
<p class="loading-text">loading...</p>
</div>
</div>
</body></html>