Kevin Powell - Community•16mo ago

Need help with creating a progress bar

Im trying to add a small triangle to the marked div but im having issues with it. CAn someone help me out ? this is how it should look https://codepen.io/avinash-tallapaneni/pen/ExRomwX

Avinash-Tallapaneni

CodePen

Basketball scoreboard

...

5 Replies

Mannix•16mo ago

.skill-per::after {
    content: '';
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #1a283f transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.skill-per::after {
    content: '';
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #1a283f transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

Avinash•16mo ago

its kinda worked but not entirely. when JS is added the whole segment should move

                       <span class="tooltip" data-value="90">Standard</span>

                       <span class="tooltip" data-value="90">Standard</span>

gave this value and the corresponding js code is

 window.onload =() => {
    const tooltips = document.querySelector('[data-value]');
    const stopValue = document.querySelector('.skill-per');

    const dataValue = tooltips.dataset.value;

    stopValue.style.width = `${dataValue}%`;

    console.log('hello')
}

 window.onload =() => {
    const tooltips = document.querySelector('[data-value]');
    const stopValue = document.querySelector('.skill-per');

    const dataValue = tooltips.dataset.value;

    stopValue.style.width = `${dataValue}%`;

    console.log('hello')
}

and the result is

Mannix•16mo ago

i just showed you one way how to add it you figure out the rest 😉

Jochem•16mo ago

give moving it to the right position a shot yourself, and if you can't figure it out, make a new thread 🙂

Avinash•16mo ago

yeah its not working,, tried jc etc still no avail. i will make a new thread in a bit i made same feature in a new file it is working but when i implement it in a projects its going bonkers

Gaming

Programming

Need help with creating a progress bar