NiceSnippets.com
Jquery Progresstimer With Bootstrap 4
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 timer javascript , you can download full code of bootstrap progress bar countdown layout. Here in this post i will give you example of bootstrap progress bar timer snippet and you will get simple code of html, css and jquery. In bootstrap loading snippet i give you three tab with html, css and js, you can easily get code of bootstrap progress bar text inside layout.
<!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>
.progress-part{
padding:30px;
border-radius: 3px;
background-color: #fff;
}
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));
}
});
});
