Create Progress Bar component

[LazarusAA]

Create the progress bar component it should be a normal progress bar. The component should receive the amount of progress, so that it calculates how much it should be filled according to said number. Please refer to the color palette for the accurate hex code colors

Component Image:

Color Palette:

[0xdevcollins]

Could I try solving this?

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 with 46 significant contributions spread over 12 OnlyDust projects.

[Michaelkingsdev]

Hello @LazarusAA
I am a frontend developer with 4 years of experience. I would really love to work on this task. Can it be assigned to me?

[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.

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the repository and reference design and I believe I can handle this. Can take on this task?

[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?

[aidenwong812]

Can I take 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!

[chiscookeke11]

Is it okay if I tackle this?

[Verifieddanny]

Can I contribute to this one?

[Villarley]

I’m Santiago Villarreal Arley, a proactive and communicative developer with experience in both front-end and back-end Web3 development. I’m a proud member of Dojo Coding and have worked on various projects built on StarkNet and Stellar, where I actively contributed to creating scalable and efficient solutions. I also won a Web3 hackathon Buildathon for my work on BuildMyEvent, an open-source blockchain project focused on solving real-world challenges and integrating useful features.
This would be my second contritbution and would be ready within 24 hours.

[icodejsx]

Can I take this from here?

[codingPriyanshu]

Could I try solving this?

[davedumto]

Hi,
My name is David, and I am a frontend developer skilled in JavaScript, TypeScript, React.js, and Next.js. I will create a reusable progress bar component that dynamically calculates and fills progress based on the received value.
I’ll ensure the component matches the provided design and accurately uses the specified color palette. The component will be fully tested for responsiveness and usability. ETA: 6 hours

[BlessingEmejulu]

Can I start working on this?

[Elite-tch]

I am excited to apply for the role of creating the Progress Bar component. With my strong background in front-end development and experience in building dynamic and responsive UI components, I am confident in my ability to deliver a high-quality progress bar that aligns with your specifications.

In my previous projects, I have successfully developed reusable and customizable components, ensuring optimal performance and seamless user experience. I am proficient in React and have a keen eye for detail, particularly when it comes to adhering to design guidelines, including specific color palettes and style requirements.

I am eager to contribute my skills to your team and am confident that my technical expertise and passion for creating intuitive interfaces make me a great fit for this role. I look forward to the opportunity to discuss how I can contribute to your project.

Thank you for considering my application.

[rohithc123]

Can I work on this, please?

[ekumamatthew]

Can I take care of this issue?

[olisaagbafor]

May I take this issue on?

[Nityam573]

@evgongora may I work on this
It's been pending for about a month

[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?

[Verifieddanny]

Can I contribute to this one?

[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?

[B-uchi]

Let me try this one!

[EA10-lite]

Can I handle this task?

[SimpleX-T]

Hey @LazarusAA, Can I take on this issue?