Bootstrap 4 Auto Progress Bar

Press F12 for console debug

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
HTML code

<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.