Bootstrap 4 Auto Progress Bar
Press F12 for console debugHTML code
requirements: 1. jQuery 2. Bootstrap 4 css 3. https://rawcdn.githack.com/dimaslanjaka/Web-Manajemen/f3dfa14a3848a8282eb39b1e2f01e1d6e62d7c44/js/jquery.progressBarTimer.min.js Read How to async defer CSS JS perfectly attribute info: countdown = to start countdown data-callback = function name of callback data-warning = bar warning style data-success = bar success style data-base = bar progress style
<div data-callback="fn" countdown="5"></div> <div data-callback="fi" countdown="10"></div>Javascript code
var elm = $("[countdown]"); function fc() { console.log("callback Succedeed") } function ctd(elm) { //main function var tl = 0 < elm.attr("countdown") ? elm.attr("countdown") : 5, bs = elm.data("base") ? elm.data("base") : "bg-info", bw = elm.data("warning") ? elm.data("warning") : "bg-danger", bc = elm.data("success") ? elm.data("success") : "bg-success", myCountdown = elm.progressBarTimer({ warningThreshold: 5, timeLimit: tl, baseStyle: bs, warningStyle: bw, completeStyle: bc, smooth: !0, striped: !0, animated: !0, height: 0, onFinish: function() { var callback = elm.data("callback"), xn = window[callback]; if ("function" == typeof xn) { var x = eval(callback); x() } else console.log(callback + " isn't function ") }, label: { show: !0, type: "percent" }, autoStart: !0 }) } 0 < elm.length && elm.each(function(e) { //looping elements with attribute countdown ctd($(this)) });Live example

See the Pen Bootstrap 4 progress bar countdown by dimas lanjaka (@dimaslanjaka) on CodePen.
0 Response to "Bootstrap 4 Auto Progress Bar"
Post a comment
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.