SO

    <script type='text/javascript'>
    var bcTotalItems        =       0,
        bcParentId          =       'progress_bar';


    (function start() {
        var bcParent         = $( '#' + bcParentId ),
            totalItems     = findNoOfChildren(bcParent),
            parentWidth    = findWidthOfParent(bcParent),
            pages          = findNoOfPages(bcParent, totalItems);

    })();

    function findNoOfChildren(bcParent) {
        return bcParent.find('li').length;
    }

    function findWidthOfParent(bcParent) {
        return bcParent.outerWidth();
    }

    function findNoOfPages(bcParent, totalItems) {
        var pages       = 1,
            wd          = 0,
            parentWd    = findWidthOfParent(bcParent),
            crumbs      = bcParent.find('li'),
            i           = 0;

        console.log(parentWd);

        for( i = 0; i < totalItems; i++) {
            wd = 0;
            while(wd <= parentWd) {
                console.log(i);
                crumb = crumbs.eq(i);
                wd += crumb.outerWidth();
                console.log('before if' + wd);
                i += 1;
                if( wd <= parentWd) {

                    crumb.addClass( 'bcPage-' + pages);
                    console.log('inside if' + wd);
                }
            }

            pages += 1;
        }

        return pages;
    }


    function divideCrumbsIntoPages() {

    }
    </script>