# Tailwindcss でローディングコンポーネント作成
Tailwindcss で stylesheet 書かずにローディングのコンポーネント作成できるので、便利ですね。
html サンプル
<div className="fixed inset-0 flex items-center justify-center">
<div
className="h-16 w-16 animate-spin rounded-full border-t-4 border-primary-500"
></div>
</div>
# 使用する class
fixed
.fixed {
position: fixed;
}
inset-0
.inset-0 {
inset: 0px;
}
flex
.flex {
display: flex;
}
items-center
.items-center {
align-items: center;
}
justify-center
.justify-center {
justify-content: center;
}
h-16
.h-16 {
height: 4rem /* 64px */;
}
w-16
.w-16 {
width: 4rem /* 64px */;
}
animate-spin
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
rounded-full
.rounded-full {
border-radius: 9999px;
}
border-t-4
.border-t-4 {
border-top-width: 4px;
}
border-primary-500
.border-primary-500 {
--tw-border-opacity: 1;
border-color: rgb(20 184 166 / var(--tw-border-opacity)) /* #14b8a6 */;
}
# Next.js 13 グローバルローディングをカスタマイズ
app ディレクトリ直下に、loading.tsx ファイルを置くことで、グローバルローディングが適用されます。
クライアントサイドでのページ遷移、サーバーサイドでのデータ取得が完了するまでの間、サーバー側のデータフェッチや遅延がある場合も、このローディングコンポーネントが表示されます。
// app/loading.tsx
export default function Loading() {
return (
<div className="fixed inset-0 flex items-center justify-center">
<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-primary-500"></div>
</div>
);
}
参考