Week4 | Progress bars

Did it just crash? Is it stack? Only the progress bar can unveil the truth. Code one and banish all doubt.

📃 Description:

They're everywhere! Whether you're downloading files, installing a software, waiting for a web page to load, +, progress bars inform about the status of things and reduce uncertainty. They are visual indicators showing the advancement of tasks/processes.

👩‍⚖️ Rules:

This week's going to be a treat! Dive deeper into visuals and code progress bars your own way. As a sample, the progress bar of LinkedIn. Click here to play the animation.

The rule is simple, use the resources provided to clone the loading animation as closely as you can.

✨ Variation:

There's obviously nothing special about LinkedIn loading animation. Pick any progress bar you like and clone it.

💡 Where to start? (Ideas)

It’s always Input, Process, Output.

• To get started, use this bare minimum code.
• Let you start by loading the LinkedIn logo as svg. Click here to download it.
• Study the progress bar closely, play it as many time as you need, build one element at a time.

🥨 Twists

• What if it showed a percentage? What if it showed an estimated time? What if it fades away when loading is completed? +

Recommended learning:

- PShape, loadShape (), shape ()

- strokeCap (), strokeWeight ()

- map (), lerp ()

⏳ Submissions:

• Submission of this challenge, just like all of the Weekly Coder’s challenges, is to be submitted within 36 hours after its post. And so, Sunday morning 12:00 LT.