Live Demo - Jquery Progresstimer With Bootstrap 4

See Free Live Demo example of We are giving you progress bar timer example with bootstrap 4. progress bar with change status like info,danger and success. bootstrap 4 progress bar text inside.this progress bar connect with your website link. this is animated stripes progress bar. We allows to free snippets of progress bar tim...

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
    <link href="//nicesnippets.com/demo/static.min.css" rel="stylesheet"/>
    <link href="custom.css" rel="stylesheet"/>
    <title>jQuery Progress Timer DEMO</title>
</head>
<body class="bg-info">
<div class="container main-section">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-12 hedding">
            <h1 class="mt-5 p-0 mb-5 text-white text-center">Progress Timer Example</h1>
        </div>
        <div class="col-lg-12 col-sm-12 col-12 progress-part">
            <p class="text-danger"><strong>Error Display</strong></p>
            <div class="loading-progress"></div>
            <p class="text-danger"><strong>Error Cannot Connect</strong></p>
            <div class="loading-progress-2"></div>
            <p class="text-success"><strong>Connect Successfully Display</strong></p>
            <div class="loading-progress-3"></div>
        </div>
    </div>
</div>

<script src="//nicesnippets.com/demo/static.min.js"></script>
<script src="//nicesnippets.com/demo/jquery.progresstimer.js"></script>

</body>
</html>

var progress = $(".loading-progress").progressTimer({
        timeLimit: 10,
        onFinish: function () {
            alert('completed!');
        }
    });
    $.ajax({
       url:"http://localhost/"
    }).error(function(){
        progress.progressTimer('error', {
            errorText:'ERROR!',
            onFinish:function(){
                console.log('There was an error processing your information!');
            }
        });
    }).done(function(){
        progress.progressTimer('complete');
    });

var progress2 = $(".loading-progress-2").progressTimer({
        timeLimit: 30
    });
    $.ajax({
        url: "http://www.github.com/"
    }).error(function () {
        progress2.progressTimer('error', {
            errorText: 'Cannot connect to Server',
            onFinish: function () {
                console.log('2 - Cannot connect to github!');
            }
        });
    }).done(function () {
        progress2.progressTimer('complete', {
            onFinish: function () {
                console.log('With new completion!');
            }
        });
    });

var progress3 = $(".loading-progress-3").progressTimer({
        timeLimit: 30
    });
    $.ajax({
        url: "https://api.github.com/users/octocat/orgs"
    }).error(function () {
        progress3.progressTimer('error', {
            errorText: 'Cannot connect to Server',
            onFinish: function () {
                console.log('3 - Cannot connect to Server');
            }
        });
    }).done(function () {
        progress3.progressTimer('complete', {
            successText: 'Connected successfully to Server',
            onFinish: function () {
                console.log(successText);
                var glyph = $('<span></span>').addClass('glyphicon glyphicon-ok');
                $(".loading-progress-3").append($('<p></p>').append(glyph).append(' ' + successText));
            }
        });
    });

Home Back to Snippet