要素の読み込み効果を実現するための純粋なHTML+CSS

<svg viewBox="25 25 50 50" class="box">
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>

。箱 {
    高さ: 200px;
    幅: 200ピクセル;
    背景：小麦;
}
.box .circle {
    ストローク幅: 2;
    ストローク: #409eff;
    ストロークの線のサイズ: 丸い;
}

/* 回転アニメーション */
@keyframes 回転 {
    に {
        変換: 回転(1回転)
    }
}
/* 円弧アニメーション */
/* 125 は円周です */
@keyframes 円 {
    0% {
 /* 状態 1: ポイント */
        ストロークダッシュ配列: 1 125;
        ストロークダッシュオフセット: 0;
    }
    50% {
 /* 状態 2: 円 */
        ストロークダッシュ配列: 120, 125;
        ストロークダッシュオフセット: 0;
    }
    に {
 /* 状態3: ポイント（回転方向に縮小） */
        ストロークダッシュ配列: 120 125;
        ストロークダッシュオフセット: -125px;
    }
}
。箱 {
  /* ...上記と同じ*/
  アニメーション: 2 秒の線形無限回転;
}
。丸 {
  /* ...上記と同じ*/
  アニメーション: 2 秒間無限に循環します。
}