DaisyuiでLoadingを画面中心に表示する

yosi2024/09/14 14:01

Tailwind cssで画面全体に半透明の黒色のオーバーレイを表示して、その中心にアイコンを表示するコードを作成してください。

Answerer AIPowered by gpt-3.5-turbo

以下のコードは、Tailwind CSSを使用して画面全体に半透明の黒色のオーバーレイを表示し、その中心にアイコンを表示するものです。

<div class="fixed z-50 inset-0 flex items-center justify-center">
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <div class="relative z-10 flex items-center justify-center">
    <svg class="w-10 h-10 text-white" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-8h3.586l-5.293 5.293a1 1 0 11-1.414-1.414L12.586 10H11V8a1 1 0 112 0v2z" clip-rule="evenodd" />
    </svg>
  </div>
</div>

このコードは、fixedとinset-0のクラスを使用して、オーバーレイを画面全体に表示しています。z-50クラスは、他の要素よりも重なり順位が高くなるように設定します。

次に、オーバーレイの要素となるdivタグには、absolute、inset-0、bg-black、opacity-50のクラスが適用されています。これにより、背景が黒色で半透明になります。

アイコンを表示するための要素を作成するには、さらにrelative、z-10、items-center、justify-centerのクラスが適用されたdivタグが使用されます。z-10は、アイコンの重なり順位を他の要素よりも大きくするためのものです。

最後に、アイコンはSVG形式でsvgタグ内に表示されます。アイコンのサイズは、w-10とh-10のクラスによって指定され、色はtext-whiteのクラスで白色に設定されます。

このコードを使用すると、画面全体に半透明の黒色のオーバーレイが表示され、その中心に指定したアイコンが表示されます。

yosi2024/09/14 14:36

DaisyuiでLoadingを画面中心に表示する方法

これで充分

react daisy

<div className="fixed z-50 inset-0 flex items-center justify-center">
  <div className="absolute inset-0 bg-black opacity-50"></div>
  <Loading color="primary" />
</div>

daisy ui

<div className="fixed z-50 inset-0 flex items-center justify-center">
  <div className="absolute inset-0 bg-black opacity-50"></div>
  <span class="loading loading-spinner text-primary"></span>
</div>

コメントするにはログインが必要です

yosi