<div class="other-19">
<div class="other-19__loading">
<div class="other-19__loading-item" style="--index:1"></div>
<div class="other-19__loading-item" style="--index:2"></div>
<div class="other-19__loading-item" style="--index:3"></div>
<div class="other-19__loading-item" style="--index:4"></div>
<div class="other-19__loading-item" style="--index:5"></div>
<div class="other-19__loading-item" style="--index:6"></div>
<div class="other-19__loading-item" style="--index:7"></div>
<div class="other-19__loading-item" style="--index:8"></div>
</div>
<div class="other-19__line"><span class="other-19__line-item" style="--index:1">テ</span><span class="other-19__line-item" style="--index:2">キ</span><span class="other-19__line-item" style="--index:3">ス</span><span class="other-19__line-item" style="--index:4">ト</span><span class="other-19__line-item" style="--index:5">が</span><span class="other-19__line-item" style="--index:6">入</span><span class="other-19__line-item" style="--index:7">り</span><span class="other-19__line-item" style="--index:8">ま</span><span class="other-19__line-item" style="--index:9">す</span><span class="other-19__line-item" style="--index:10">。</span><span class="other-19__line-item" style="--index:11">テ</span><span class="other-19__line-item" style="--index:12">キ</span><span class="other-19__line-item" style="--index:13">ス</span><span class="other-19__line-item" style="--index:14">ト</span><span class="other-19__line-item" style="--index:15">が</span><span class="other-19__line-item" style="--index:16">入</span><span class="other-19__line-item" style="--index:17">り</span><span class="other-19__line-item" style="--index:18">ま</span><span class="other-19__line-item" style="--index:19">す</span><span class="other-19__line-item" style="--index:20">。</span><span class="other-19__line-item" style="--index:21">テ</span><span class="other-19__line-item" style="--index:22">キ</span><span class="other-19__line-item" style="--index:23">ス</span><span class="other-19__line-item" style="--index:24">ト</span><span class="other-19__line-item" style="--index:25">が</span><span class="other-19__line-item" style="--index:26">入</span><span class="other-19__line-item" style="--index:27">り</span><span class="other-19__line-item" style="--index:28">ま</span><span class="other-19__line-item" style="--index:29">す</span><span class="other-19__line-item" style="--index:30">。</span></div>
</div>
.other-19
.other-19__loading
- for (var i = 0; i < 8; i++)
.other-19__loading-item(style='--index:' + (i + 1))
.other-19__line
- for (var j = 0; j < text.length; j++)
span.other-19__line-item(style='--index:' + (j + 1)) #{ text[j] }
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-19';
// 変数
#{ $BLOCK_NAME } {
&__loading {
position: relative;
height: 60px;
width: 60px;
}
&__loading-item {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 10px;
background: #000;
border-radius: 9999px;
--angle: calc(360deg / 8 * var(--index));
--x: calc(cos(var(--angle)) * 30px);
--y: calc(sin(var(--angle)) * 30px);
translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
--duration: 1.8s;
--delay: calc(var(--duration) * var(--index) / 8);
animation: other19Loading var(--duration) var(--delay) infinite ease-in-out;
}
&__line {
margin-top: 40px;
white-space: nowrap;
letter-spacing: 1px;
}
&__line-item {
display: inline-block;
/** 0°から360°の間で角度を計算 */
--angle: calc(360deg / 18 * var(--index));
/** カーブの振れ幅を10pxにする */
--y: calc(sin(var(--angle)) * 20px);
translate: 0 var(--y);
}
}
@keyframes other19Loading {
50% {
opacity: 1;
transform: scale(1.6);
}
}