Skip to main content

Dynamic UI

Animation

Difficulty: Medium

In this exercise, you will design and implement a custom animated loading indicator UI component that visually represents different loading states. The component should transition smoothly between states to enhance the user experience.

See Demo

Component States

  • Loading: A rounded rectangle continuously spins while shifting back and forth along the x-axis. A text label below displays "Loading".
  • Success: The moving rounded rectangle fades out and quickly re-fades in with a green fill color, indicating success. The text label updates to "Success".
  • Error: The moving rounded rectangle fades out and quickly re-fades in with a red fill color, indicating an error. The text label updates to "Error".

Functionality Requirements

  • Dismissal Behavior: The component should automatically disappear after N seconds in success/error states. The user should be able to tap anywhere to dismiss it early.
  • Animation: The loading animation should feel smooth and natural. The state transition animations should be quick but noticeable, ensuring clear feedback.
  • API Design: The component should provide a simple and intuitive API to trigger different loading states and customize the dismissal delay after success or error. Consider providing a callback when the component disappears.

Testing

To validate the component's behavior, implement a test view (i.e. buttons) that allows simulating all three states (loading, success, and error).