Hapicode

# 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>
  );
}

参考

2024-11-14
  • css

関連記事

CSS リセットのカスタマイズ

CSSリセット方法とカスタマイズ方法について紹介します。...

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習 タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...