Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

100
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda