HTML5 code


<div class="col-md-12">
    
    <div class="alert alert-gfort" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        Well done! You successfully read this important alert message.
    </div>
</div>

CSS3 code

.alert-gfort {
    border: 0;
    color: #ffffff;
    overflow: hidden;
    font-weight: 500;
    background-color: #2791d8;
    border-radius: 0 2px 2px 0;
    border-left: 10px solid rgba(0, 0, 0, 0.15);
}

Javascript code

function gfortProgressBlockfn() {
    jQuery('.progress-block').each(function () {
        var el = jQuery(this),
            progressBarWidth = el.find('.progress-bar');
        el = new Waypoint({
            element: el[0],
            handler: function () {
                progressBarWidth.css({width: jQuery(this.element).find('span').attr('data-to') + '%'});
                this.destroy();
            },
            offset: '95%'
        });
    });
}