CSS aria-busy 属性の活用 | 株式会社トラスト

下記の記事で紹介されていた aria-busy 属性の活用方法を実践してみました。
翻訳していただきありがとうございます。

Rails: Turbo Frameの読み込みプログレス表示をCSSだけで実現する（翻訳）

元記事のソースコードは公開されています。これにも感謝です。
CSS に手を加えて背景色と表示位置などを変えてみました。

app/assets/stylesheets/application.css

#second::after {
  content: "Loading…";
  position: absolute;
  /* inset: 0; */
  /* padding: .125rem; */
  display: none;
  /* background-color: #fff; */
  background-color: #ccc;
}

スピナー画像のアニメーションも勉強になりました。

border-radius は 100vmax; と書くのも良いみたいです。

以上です。

▼この記事がいいね！と思ったらブックマークお願いします