ローディングスケルトンのCSSジェネレーター

<div class="skeleton-card">
	<div class="skeleton-avatar"></div>
	<div class="skeleton-content">
		<div class="skeleton-line" style="width: 80%"></div>
		<div class="skeleton-line"></div>
		<div class="skeleton-line" style="width: 60%"></div>
	</div>
</div>

/* スケルトンカードのコンテナ */
.skeleton-card {
	display: flex;
	align-items: center;
	padding: 24px;
	gap: 20px;
	background: #ffffff;
	border-radius: {{skeleton_radius}}px;
	border: 1px solid #efefef;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	max-width: 450px;
	width: 100%;
}

/* 共通のスケルトン(骨組み)スタイル */
.skeleton-avatar,
.skeleton-line {
	/* 重要: fixed を使うことで全要素の背景座標をビューポートで同期させます */
	/* 30% - 50% - 70% と広めの比率にすることで、ふわっとした柔らかな光にします */
	background: linear-gradient(90deg, {{base_color}} 30%, {{highlight_color}} 50%, {{base_color}} 70%);
	background-size: 1000px 100%;
	background-attachment: fixed;
	animation: shimmer {{duration}}s infinite linear;
	border-radius: 4px;
}

/* アバター部分 */
.skeleton-avatar {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 50%;
}

/* テキスト部分のグループ */
.skeleton-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 150px;
}

/* テキストの行代わり */
.skeleton-line {
	width: 100%;
	height: 12px;
}

/* アニメーションの発火 */
@keyframes shimmer {
	0% { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}