Create an Animated Rotating Loader

[Soham-Donode]

🚀 Welcome Contributors!

Create The Following Component :

The Design & Behavior:

• Visual: A 75% open ring with a rounded cap and an angular gradient fade.
• Animation: Continuous 360° rotation.
• Feel: The animation must be smooth and linear (it should not speed up or slow down while spinning).

---

📚 Learning Resources (How to do this)

Below is a youtube video which explains how to do this :
https://www.youtube.com/watch?v=wjIiwyOP8uY

---

🛠️ Instructions

Part 1: The Design

1. Draw the Ring: Use the Ellipse tool and "Arc" handle to create the open circle.
2. Style: Apply an Angular Gradient (Black to Transparent) and set stroke caps to "Round".
3. Component: Turn your design into a Component.

Part 2: The Animation (Prototype)

1. Create Variants: Create varying states of your loader rotated (e.g., 0°, 90°, 180°, -90°).
2. Connect them: Go to the "Prototype" tab. Connect the variants in a loop using "After Delay".
3. Settings:

• Trigger: After Delay (1ms)
• Animation: Smart Animate
• Curve: Linear (Important! Do not use Ease-in/out, or it will look wobbly).
• Time: Adjust time (e.g., 300ms-600ms) for a smooth speed.

4. Test: Play the prototype to ensure it spins perfectly without glitches.

---

📝 Submission Guidelines

To successfully merge your contribution, please follow these file naming and folder structure rules strictly:

1. The Folder
Navigate to the folder named: 1-loader

2. The File
Create a new text file. The name of the file must be your GitHub username.

• Example: If your username is johndoe, your file should be named johndoe.txt.

3. The Content
Open your .txt file and paste only the link to your live Figma file.

• Note: Ensure your Figma link permissions are set to "Anyone with the link can view".

Directory Structure Example:

Repo Root
└──1-loader/
    └── <your-github-username>.txt  <-- You create this!

Happy Prototyping! 💫