<!-- 縦線が走るローディングアニメーション：<head> 内に配置 -->
<style>
/* ===== ここから CSS ===== */
/* 線の入れ物：画面全体に重ねる（クリックは下のページに通す） */
.line-sweep {
  --ls-color: #2b2d39;   /* ★ 線の色 */
  --ls-width: 1px;       /* ★ 線の太さ */
  position: fixed;
  inset: 0;
  z-index: 9999;         /* 重なり順（既存のローディング画面より前に表示する場合は大きくする） */
  overflow: hidden;
  pointer-events: none;  /* 線の上からでもリンクを押せるように */
}
/* 線1本 */
.line-sweep__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ls-width);
  background: var(--ls-color);
  will-change: transform;
}
/* ===== ここまで CSS ===== */
</style>
<script>
/* ===== JavaScript =====
   - 縦線を COUNT 本、画面の左端の外から右端の外まで走らせる
   - 線ごとに「速さ・出だしの遅れ・加速のしかた・濃さ」を毎回ランダムに決める
   - 読み込み中　　　　　　：右へ抜けた線を、また左から走らせる（速さなどは毎回決め直す）
   - 読み込み完了（load）　：新しく走らせない。走っている線が右へ抜けたら終わり
   - MAX_WAIT を過ぎても読み込み中：読み込み完了と同じく、走っている線が右へ抜けたら終わり
   - どの線も最低1回は走る（読み込みが一瞬で終わるページでも、アニメーションが見えるように）
   - 全部の線が抜けたら、線の入れ物ごと削除する
   - 線の入れ物は body の外（<html> の直下）に作る
     body を隠して表示する設定（body { display: none; } からのフェードインなど）があっても、線が一緒に隠れないため
   - 動かすのは transform だけ（ブラウザが画面を描き直さずに動かせるので軽い）
   - 動きを減らす設定（prefers-reduced-motion）のブラウザ、Web Animations API が使えないブラウザでは何もしない
*/
( function () {
	'use strict';

	var MODE        = 'loop'; /* ★ 'loop'＝読み込みが終わるまで繰り返す／'once'＝開いたときに1回だけ走らせる */
	var MAX_WAIT    = 5000;   /* ★ 読み込みが終わらなくても、繰り返しをやめるまでの時間（ミリ秒） */
	var COUNT       = 5;      /* ★ 線の本数 */
	var DUR_MIN     = 300;    /* ★ 一番速い線が抜けるまでの時間（ミリ秒） */
	var DUR_MAX     = 1600;   /* ★ 一番遅い線が抜けるまでの時間（ミリ秒） */
	var DELAY_MAX   = 450;    /* ★ 線ごとの出だしの遅れの最大（ミリ秒） */
	var OPACITY_MIN = 0.15;   /* ★ 一番薄い線の濃さ（OPACITY_MAX と同じにすると全部同じ濃さ） */
	var OPACITY_MAX = 0.3;    /* ★ 一番濃い線の濃さ（1 で --ls-color の色そのまま） */

	/* 加速のしかた（等速・だんだん速く・だんだん遅く・急に動く など）から毎回1つ選ぶ */
	var EASES = [
		'linear',
		'ease-in',
		'ease-out',
		'cubic-bezier(.7,0,.3,1)',
		'cubic-bezier(.2,.9,.3,1)',
		'cubic-bezier(.9,.1,1,.4)'
	];

	if ( window.matchMedia && window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
		return;
	}
	if ( ! Element.prototype.animate ) {
		return;
	}

	var loaded = false; /* ページの読み込みが終わったか */
	var startedAt;      /* 走り始めた時刻 */

	function rnd( min, max ) {
		return min + Math.random() * ( max - min );
	}

	/* 線をもう一度走らせるか：'loop' で、読み込み中かつ MAX_WAIT 以内のときだけ */
	function shouldRepeat() {
		return 'loop' === MODE && ! loaded && ( Date.now() - startedAt ) < MAX_WAIT;
	}

	/* 線を1本、左端の外から右端の外まで走らせる。抜けたら done() を呼ぶ */
	function runLine( line, done ) {
		var endX = window.innerWidth + 4; /* 走らせるたびに測る（画面の幅が変わっても右端まで抜けるように） */
		line.style.opacity = rnd( OPACITY_MIN, OPACITY_MAX ).toFixed( 2 );

		line.animate(
			[
				{ transform: 'translateX(-4px)' },
				{ transform: 'translateX(' + endX + 'px)' }
			],
			{
				duration: rnd( DUR_MIN, DUR_MAX ),
				delay: rnd( 0, DELAY_MAX ),
				easing: EASES[ Math.floor( Math.random() * EASES.length ) ],
				fill: 'both'
			}
		).finished.then( function () {
			if ( shouldRepeat() ) {
				runLine( line, done ); /* 読み込み中なら、また左から */
			} else {
				done();
			}
		} );
	}

	function run() {
		var wrap = document.createElement( 'div' );
		var rest = COUNT; /* まだ走っている線の数 */

		wrap.className = 'line-sweep';
		wrap.setAttribute( 'aria-hidden', 'true' );
		document.documentElement.appendChild( wrap ); /* body の外に作る（理由は冒頭） */
		startedAt = Date.now();

		for ( var i = 0; i < COUNT; i++ ) {
			var line = document.createElement( 'span' );
			line.className = 'line-sweep__line';
			wrap.appendChild( line );

			runLine( line, function () {
				rest--;
				if ( 0 === rest ) {
					wrap.remove(); /* 全部抜けたら入れ物ごと削除 */
				}
			} );
		}
	}

	/* 読み込み完了の印（すでに終わっていればすぐ） */
	if ( 'complete' === document.readyState ) {
		loaded = true;
	} else {
		window.addEventListener( 'load', function () {
			loaded = true;
		} );
	}

	if ( 'loop' === MODE ) {
		run(); /* 読み込みが始まった直後から走らせる */
	} else if ( 'loading' === document.readyState ) {
		document.addEventListener( 'DOMContentLoaded', run );
	} else {
		run();
	}
} )();
</script>

/**
 * 縦線が走るローディングアニメーション
 * ・css/line-sweep.css と js/line-sweep.js を <head> で読み込む
 * ・JavaScript を <head> で読み込むのは、ページの読み込みが始まった直後から線を走らせるため
 */
function line_sweep_enqueue() {
	// CSS（線の色・太さ・重なり順）
	wp_enqueue_style(
		'line-sweep',
		get_theme_file_uri( 'css/line-sweep.css' ),
		array(),
		filemtime( get_theme_file_path( 'css/line-sweep.css' ) ) // 更新したら自動でキャッシュ更新
	);

	// JavaScript（jQuery 不要なので依存なし）
	wp_enqueue_script(
		'line-sweep',
		get_theme_file_uri( 'js/line-sweep.js' ),
		array(),
		filemtime( get_theme_file_path( 'js/line-sweep.js' ) ), // 更新したら自動でキャッシュ更新
		false // false＝<head> で読み込む（true だと </body> の直前）
	);
}
add_action( 'wp_enqueue_scripts', 'line_sweep_enqueue' );