Jquery 引导进度条在视图中加载一次

当我试图让进度条在视图中加载一个进度条时遇到一些问题，我使用了此网站中的一个代码，如下所示：

HTML:

JS:

有人能告诉我为什么这行不通吗？非常感谢！：）

            <div class="progress-element">
                <p>HTML</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="75"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>CSS</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>JavaScript</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="20"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>Wordpress</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="25"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
            </div><!-- End of progress-element -->

.progress {
    background: white;
    box-shadow: none;
}

.progress-bar {
    background: purple;
}

.progress-element {
    text-align: left;
}

        $(".progress-element").each(function () {
            $(this).waypoint(function () {
                var progressBar = $(".progress-bar");
                progressBar.each(function (indx) {
                    $(this).css("width", $(this).attr("aria-valuenow") + "%");
                });
            }, {
                triggerOnce: true,
                offset: 'bottom-in-view'
            });
        });