Latihan 1: Transitions & Animations — Tailwind CSS

Latihan 1 dari materi Transitions & Animations di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin ikon loading yang berputar.

Di <div id="spinner"> yang sudah ada, tambahkan atribut class.
Isi class-nya: animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent.
<div>-nya memang kosong, biarkan begitu: yang kelihatan cuma border-nya.

Yang dicek pemeriksa: #spinner ada, dan class-nya punya rounded-full (bulat penuh) dan animate-spin (berputar terus). Putarannya kelihatan di preview.

Hint

Spinner itu lingkaran berborder yang salah satu sisinya transparan, lalu diputar terus oleh animasi bawaan Tailwind.
Butuh ukuran (h-8 w-8), border tebal berwarna (border-4 border-blue-500), bentuk lingkaran (rounded-full), satu sisi transparan (border-t-transparent), dan animate-spin.
<div id="spinner" class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Transitions & Animations — Tailwind CSS

Hint

Memperbarui Aplikasi