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.

Subscribe to receive free email updates:

0 Response to "Bootstrap 4 Auto Progress Bar"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
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.