Spin animation (loading) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a spinning animation to the div using Tailwind CSS.

Tailwind

<div class="w-8 h-8 border-4 border-gray-300 border-t-blue-500 rounded-full [1]"></div>

Drag options to blanks, or click blank then click option'

Aanimate-spin

Bspin

Canimation-spin

Dspin-animation

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'spin' or 'animation-spin' which do not exist in Tailwind.

Forgetting to add the class to the element.

The class animate-spin in Tailwind CSS adds a continuous spinning animation to the element.

2fill in blank

medium

Complete the code to create a blue spinning loader with a border thickness of 4.

Tailwind

<div class="w-10 h-10 border-[1] border-blue-600 border-t-transparent rounded-full animate-spin"></div>

Drag options to blanks, or click blank then click option'

A6

B2

C4

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using too thin or too thick border classes like 'border-2' or 'border-8' which don't match the requirement.

Confusing border color with border thickness.

The class border-4 sets the border thickness to 4 pixels in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to make the spinner animate correctly.

Tailwind

<div class="w-12 h-12 border-4 border-gray-400 border-t-[1] rounded-full animate-spin"></div>

Drag options to blanks, or click blank then click option'

Ablue500

Bblue-500

Cblue_500

Dblue-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using color classes without dashes like 'blue500' which causes no color to apply.

Using a very light color like 'blue-50' which is hard to see.

Tailwind color classes use dashes, so blue-500 is correct. Variants like blue500 or blue_500 are invalid.

4fill in blank

hard

Fill both blanks to create a spinner with a red top border and a gray border around.

Tailwind

<div class="w-14 h-14 border-4 border-[1] border-t-[2] rounded-full animate-spin"></div>

Drag options to blanks, or click blank then click option'

Agray-300

Bred-600

Cblue-500

Dgreen-400

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the border and border-top colors.

Using the same color for both borders which removes the spinner effect.

The outer border is gray using border-gray-300 and the top border is red using border-t-red-600 for a colored spinning effect.

5fill in blank

hard

Fill all three blanks to create a large spinner with a green border, a white top border, and a spin animation.

Tailwind

<div class="w-20 h-20 border-8 border-[1] border-t-[2] rounded-full [3]"></div>

Drag options to blanks, or click blank then click option'

Agreen-500

Bwhite

Canimate-spin-slow

Danimate-spin

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid classes like animate-spin-slow which does not exist in standard Tailwind CSS.

Using the same color for border and top border which hides the spin effect.

The spinner uses border-green-500 for the border, border-t-white for the top border, and animate-spin for the spin animation.