Create Progress Bar component

[LazarusAA]

Description

Develop a reusable progress bar component that visually represents progress based on an input value. The component should dynamically calculate the filled portion according to the provided progress amount and use the accurate hex code colors from the color palette.

• Dynamic Calculation:
  Accept a numeric progress value and adjust the fill level accordingly.

• Design Consistency:
  Utilize the specified hex code colors to ensure the progress bar aligns with the overall design.

• Responsiveness:
  Ensure the progress bar adapts seamlessly to different screen sizes.

Component Image:

Color Palette:

[Kachimercy1]

I'd like to handle this task.

[petersdt]

Is it okay if I tackle this?

[7-falseparfait]

Is it okay if I take this?

[kayceeDev]

May I pick this up?

[ShantelPeters]

I'd like to handle this task.

[chigozzdevv]

Hello,
Could I try solving this?

[BrunoAmbricca]

I would like to work on this issue

[Yunusabdul38]

May I be assigned to this?
I have solid experience in both web2 and web3 and have contributed to open-source projects that ended up being merged both on web2 and web3
will be glad to work on this as my first contribution to this project

[ikezuby2012]

Hello, my name is nnubia nzube, I'm a full-stack developer with nearly 4 years of experience working with JavaScript, TypeScript, Reactjs, Nextjs, tailwindcss, Express.js, and recently exploring Cairo for blockchain development. I’m passionate about building robust and scalable applications while ensuring clean and maintainable code.

i would like to work on this issue and my ETA is 8 hours

[caxtonacollins]

Can I jump on this task?

[khayss]

I'm a full-stack developer with cool experience building beautiful, stylish and user-friendly UIs.

To tackle this issue, I'll:

• Create a progress bar components that takes in the bar details, and outputs a progress bar that fits the requirement.
• Make this available to be integrated in any required section.
• Ensure the styling esp. color is in line with the requirement.
• Test to ensure the functionality works as expected.

Looking forward to working on this.

[Dorcas18]

Can I start working on this?

[Nityam573]

I'd like to take this issue.
My Background
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions

[evgongora]

Hello @khayss any updates on this?

[evgongora]

@khayss No update since assigned will be reassigning.

[sonkeydotcom]

I'd like to take this issue.

[derianrddev]

I’m Derian Rodríguez, a member of the Dojo Coding community ⛩️💻. Could I take over this issue?

[3th-Enjay]

i can handle this issue

[drakkomaximo]

[FE]: Create Progress Bar component

Hi @LazarusAA and everyone!, I'm a Dojo Coding member⛩️

I’d be happy to participate in this issue. With over 5 years of experience in frontend development, I’ve worked on similar projects and can ensure a clean, user-friendly, and well-structured implementation.

Steps to Resolve:

1) Contact the Supervisor

• My first step will be to communicate with the person responsible for overseeing this task. This ensures I fully understand the expectations, receive any clarifications, and align my approach with project requirements.

2) Analyze Design Specifications

• I’ll review the provided design assets (e.g., Figma) to ensure the component follows SocialSphere’s design system, including the color palette and minimalist, accessible UI principles.

3) Define Component Properties

• progress: A number indicating the fill percentage.
• step and totalSteps: To display text like "Step 3 of 4."

4) Build the Component

• Using Next.js and Tailwind CSS, I’ll create a structured, responsive, and visually appealing progress bar that dynamically adjusts its fill based on the progress prop, with smooth transitions.

5) Ensure Accessibility and Responsiveness

• I’ll apply ARIA roles and Tailwind utilities to make the component accessible and adaptable across all devices.

6) Test and Optimize

• I’ll test the component in various scenarios to ensure it behaves consistently and aligns with the design guidelines.

---

Estimated Time: 1-3 days

Let me know if I can start working on this!

[ikennaezef]

Hello,

My name is Ikenna, and I am a front-end developer skilled in JavaScript, Typescript, React.js, and Next.js. I'd like to take this issue and I’ll ensure the changes are implemented seamlessly according to the requirements and tested thoroughly to maintain functionality.

Estimated Time: 1 day

[Emmy123222]

May I be assigned to this?

[VyuduInc]

Can I attempt this issue?

[Nityam573]

Can I attempt this issue?

[feranmiba]

Can I jump on this task?
I want to to jump on this task and create a nice and responsive progressive bar component

[chiscookeke11]

Could I be assigned to this?

[Elite-tch]

Is it okay if I tackle this?

[covenantebube]

Hi, My name is covenant ebube. I am a MERN stack developer with years of experience solving real-world problems using Javascript, React and Typescript. I am a first time contributor on this platform and i am very confident that i can solve this task within the specified time frame. Can you please assign this task?

[Amizeey]

May I try my hand at this?

[emdevelopa]

I am Emmanuel, a Fullstack Web and Mobile Developer.
I'd love to be part of the achievement of this task.

[Nikhil-550]

Can I tackle this one?plz assign me for this issue.I am new to this open source field,i would like to contribute and learn from this.

[Joesef127]

Can I work on this issue?
I will ensure the changes are implemented according to the requirements and maintain their functionality.

ETA: 1 day

[Abrahamojobo]

Could I take over this issue?

[yashh1994]

i will do this for free, please i want to start to gain confidence.

[ritik4ever]

I'd like to take this issue.

[2100031988]

I am excited to take on this opportunity as I have knowledge and experience in this area. I have successfully completed several projects that involved similar components and forms on my websites. I would be grateful for the chance to participate and am eager to contribute meaningfully to this initiative.

[JuViquez]

Let me handle this issue!

[CyberVerse2]

Is it okay if I tackle this?

[EA10-lite]

Can I handle this task?

[SimpleX-T]

Hey @LazarusAA, Can I take on this issue?

[laryhills]

Hi, I'm Hilary, a full-stack Web Developer and I will like to take on this issue.

I will make sure for a seamless conversion from the figma ensuring for pitch perfect conversion.
ETA - 2 days

[chiscookeke11]

Hi, I'm interested in this project and would love to be assigned this .

[kimcascante]

Hello! I'm Kim Cascante, a member of Dojo Coding! ⛩️
I’m passionate about design and frontend development, with experience in React, Next.js, Typescript, Java, SQL, Javascript, and small scripts for automation. I’m also diving into Web3, blockchain, and exploring the world of open-source contributions.
For this project, my approach will be:
1️⃣ Start by reviewing the current design
2️⃣ Implement new changes to make consistent with component image
3️⃣ Test the changes
4️⃣ Prepare a well-documented PR for review.
Excited to apply what I know and learn from this experience to grow as a developer. Let’s build something amazing together! 💻✨

[thetribalgod]

Sir , do let me give it a shot , I will try my best .

[ussyalfaks]

Mind if I try this one?

[Chykesxj9]

Can I take care of this issue?

[greatest0fallt1me]

Hello! I’d love to work on this and help improve the project structure. With my experience in Cairo, StarkNet, and smart contracts, I can ensure a smooth and efficient implementation.

🔹 About Me

• Blockchain Specialist – Extensive experience with Ethereum, Hyperledger, and smart contract development, ensuring secure and efficient blockchain solutions.
• Full-Stack Developer – Proficient in JavaScript (Node.js, Express) for backend development and React, Next.js for creating interactive frontends.
• Agile Practitioner – Strong advocate of Agile methodologies and cross-functional teamwork, ensuring projects are delivered on time and within scope while maintaining high quality.

⏳ Estimated Time

I’ll have this task completed within one day, making sure everything is properly updated and tested.

Let me know if I can get started—excited to contribute! 🚀

[3th-Enjay]

Can I try this

[LazarusAA]

@greatest0fallt1me, Assigned! 🚀