Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

98
Views
Skill bar load with scroll event React

I am trying to do a skill bar that loads when the user scroll to that React.Js component. Currently I can't make it work. This is the code:

const Progress = ({done}: {done: string}) => {
    const [style, setStyle] = useState({});

    useEffect(() => {
        window.onscroll = () => {
            setTimeout(() => {
                const newWidth = {
                    opacity: 1,
                    width: `${done}%`
                }
                
                setStyle(newWidth);
            }, 200);
        }
      }, [done]);        
    
    return (
        <div className={styles.bg}>
            <div className={styles.graphContainer} style={style}>
                {done}%
            </div>
        </div>
    )
}

const SkillsComponent = () => {    
    return (
        <>
        <Container>
            <h2>Skills</h2>                
                    <div className={styles.bg}>
                        <div className={styles.graphContainer}>
                            <Progress done='90' className={`${styles.skills} ${styles.html}`}>HTML</Progress>
                        </div>
                    </div>               
        </Container>
        </>
    );
}
 
export default SkillsComponent;

this is the css code:

.graphContainer {
  padding-top: 10px;
  width: 100%;
}
.skills {
  background-color: white;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  color: white;
}
.bg {
  background-image: repeating-linear-gradient(90deg, white, #222222 3px, #222222 33.3%);
  border: 2px solid #fff;
  margin-bottom: 4em;
  display: inline-block;
  min-width: 100%;
}

.html {
  width: 0%;
  background-color: #3f50b5;
  border-radius: 0px 12px 12px 0;
  margin-left: 4px;
}

I am using Typescript and currently I am getting this error:

Type '{ children: (string | Element)[]; done: string; className: string; }' is not assignable to type 'IntrinsicAttributes & { done: string; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & { done: string; }'.ts(2322)

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!