ProgressBar навыков на чистом JavaScript

Задача: при загрузке страницы заполняется прогресс бар согласно значениям которые в атрибуте data-percent. Но при загрузке значения в атрибуте data-percent не равные ширине и не корректно заполняется. Подскажите пожалуйста, в чем проблема ?? заранее спасибо!!! Codepen

let allDivBar = document.getElementsByClassName('myBar');
let width = 0;

function showProgresBar(time) {
    for (let i = 0; i < allDivBar.length; i++) {
        let dataA = allDivBar[i].getAttribute("data-percent")
        let show = setInterval(() => {
            if (width >= allDivBar[i].getAttribute("data-percent")) {
                clearInterval(show)
            }
            else {
                width++
                allDivBar[i].style.width = width + "%"
                allDivBar[i].innerHTML = width
            }

        }, time)
    }

}

showProgresBar(50);




<div class="my-progress-bar">
                                            <p>
                                                <span class="out">47% Study know</span>
                                                Java Script
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar javaScript" data-percent="80"></div>
                                            </div>
                                        </div>
                                        <div class="my-progress-bar">
                                            <p>
                                                <span class="out">50%</span>
                                                html5
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar html" data-percent="50"></div>
                                            </div>
                                        </div>
                                        <div class="my-progress-bar">
                                            <p>
                                                <span>55%</span>
                                                css3
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar css" data-percent="40"></div>
                                            </div>
                                        </div>
                                        <div class="my-progress-bar">
                                            <p>
                                                <span>45%</span>
                                                Bootstrap
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar bootstrap" data-percent="50"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col-lg-6 col-md-5 col-sm-5">
                                        <div class="my-progress-bar">
                                            <p>
                                                <span>35%</span>
                                                Gulp
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar gulp" data-percent="50"></div>
                                            </div>
                                        </div>
                                        <div class="my-progress-bar">
                                            <p>
                                                <span>43%</span>
                                                Photoshop
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar photoshop" data-percent="50"></div>
                                            </div>
                                        </div>
                                        <div class="my-progress-bar">
                                            <p>
                                                <span>35%</span>
                                                Figma
                                            </p>
                                            <div class="myProgress">
                                                <div class="myBar figma" data-percent="50"></div>
                                            </div>
                                            <div class="my-progress-bar">
                                                <p>
                                                    <span>45%</span>
                                                    Git
                                                </p>
                                                <div class="myProgress">
                                                    <div class="myBar git" data-percent="50"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>