グラデーションバー
鮮やかなグラデーションで視覚的にインパクトのあるバーです。`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>
横方向に縮小するローディングアニメーション
Keyframesで「scaleX」を指定し徐々にズームアウトするようにしています
<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: scaleX(1.5);
animation: zoomout 1.3s infinite linear;
}
@keyframes zoomout {
50% {
transform: scaleX(.95);
}
60% {
transform: scaleX(1.05);
}
70%,
100% {
transform: scaleX(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>
上から文字が黒塗りされるローディングアニメーション
「-webkit-text-stroke」で文字を縁取り、before疑似要素で文字の高さを徐々に広げるアニメーションを入れてます。
<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-text {
position: relative;
font-size: 2rem;
font-weight: bold;
color: transparent;
text-transform: uppercase;
-webkit-text-stroke: 1px black;
}
.loading-text::before {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height:0;
color: black;
animation: textSlide 2s infinite linear;
content: "loading...";
}
@keyframes textSlide {
0% {
-webkit-text-stroke: 1px black;
height: 0;
}
70%,
100% {
height: 100%;
-webkit-text-stroke: 0px black;
}
}
</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>