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="http://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="http://nicesnippets.com/demo/static.min.js"></script> <script src="http://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)); } }); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post