JSFiddle - React, Tailwind, and code Playground

Bar Graph

by Jennifer Perrin

HTML

<ul class="bar_graph">
    <li>
        <p>HTML/CSS</p>
        <div class="bar-wrap"><span data-width="70"> <strong>70%</strong> </span>
        </div>
    </li>
    <li>
        <p>Logo Design</p>
        <div class="bar-wrap"><span data-width="80"> <strong>80%</strong> </span>
        </div>
    </li>
    <li>
        <p>WordPress</p>
        <div class="bar-wrap"><span data-width="100"> <strong>100%</strong> </span>
        </div>
    </li>
    <li>
        <p>Photoshop</p>
        <div class="bar-wrap"><span data-width="90"> <strong>90%</strong> </span>
        </div>
    </li>
    <li>
        <p>Illustrator</p>
        <div class="bar-wrap"><span data-width="75"> <strong>75%</strong> </span>
        </div>
    </li>
</ul>

CSS

.bar_graph {
    margin: 0 !important;
    text-align: left !important;
}
.bar_graph li {
    list-style: none outside none !important;
}
.bar_graph li:last-child span {
    margin-bottom: 0;
}
.bar_graph li .bar-wrap {
    background-color: #EBEBEB;
    border-radius: 300px 300px 300px 300px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
    margin-bottom: 13px;
}
.bar_graph li span {
    background-color: #18CAA8;
    border-radius: 300px 300px 300px 300px;
    display: block;
    height: 15px;
    width: 0;
}
.bar_graph li p {
    padding-bottom: 2px;
}
.bar_graph li span {
    overflow: visible !important;
    position: relative;
}
.bar_graph li span strong {
    background-color: #333333;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: block;
    font-family:'OpenSansSemibold';
    font-size: 11px;
    line-height: 12px;
    opacity: 0;
    padding: 4px 7px !important;
    position: absolute;
    right: 0;
    top: -25px;
}
.bar_graph li span strong:after {
    border-color: #333333 transparent;
    border-style: solid;
    border-width: 5px 5px 0;
    bottom: -5px;
    content:"";
    display: block;
    left: 12px;
    position: absolute;
    width: 0;
}
.bar_graph li span strong.full:after {
    left: 15px;
}

JavaScript

jQuery(document).ready(function($){
    function animateBar() {
        $('.bar_graph li').each(function (i) {
            var percent = $(this).find('span').attr('data-width');
            $(this).find('span').animate({
                'width': percent + '%'
            }, 1700, 'easeOutCirc');
            $(this).find('span strong').animate({
                'opacity': 1
            }, 1400);
            ////100% progress bar
            if (percent == '100') {
                $(this).find('span strong').addClass('full');
            }
        });
    }
    if ($('.bar_graph').length > 0) {
        animateBar();
        $(window).scroll(animateBar);
    }
});