Progress Bars
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Progress Bars
Super Easy To Create Progressss Bars With Some MarkUp
Code Snippet To Achieve The Above Results
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "0" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 25%" aria-valuenow = "25"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 50%" aria-valuenow = "50"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 75%" aria-valuenow = "75"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 100%" aria-valuenow = "100"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Assign Background Colors And Height
Super Easy To Create Progressss Bars With Some MarkUp
Code Snippet To Achieve The Above Results
<div class = "progress" style = "height: 5px;">
<div class = "progress-bar bg-success" role = "progressbar" style = "width: 25%"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress" style = "height: 10px;">
<div class = "progress-bar bg-info" role = "progressbar" style = "width: 50%"
aria-valuenow = "50"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress" style = "height: 15px;">
<div class = "progress-bar bg-warning" role = "progressbar" style = "width: 75%"
aria-valuenow = "75" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress" style = "height: 20px;">
<div class = "progress-bar bg-danger" role = "progressbar" style = "width: 100%"
aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Stripped And Strip Animation
Super Easy To Create Progressss Bars With Some MarkUp
Code Snippet To Achieve The Above Results
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped" role = "progressbar"
style = "width: 25%"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped" role = "progressbar"
style = "width: 50%"
aria-valuenow = "50"
aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar bg-warning progress-bar-striped progress-bar-animated"
role = "progressbar" style = "width: 75%"
aria-valuenow = "75" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<div class = "progress">
<div class = "progress-bar bg-danger progress-bar-striped progress-bar-animated"
role = "progressbar" style = "width: 100%"
aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Add Label As Well
Super Easy To Create Progressss Bars With Some MarkUp
Code Snippet To Achieve The Above Results
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped progress-bar-animated"
role = "progressbar"
style = "width: 25%"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100">25% PHP Score
</div>
</div>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped progress-bar-animated"
role = "progressbar"
style = "width: 50%"
aria-valuenow = "50"
aria-valuemin = "0" aria-valuemax = "100">50% HTML Score
</div>
</div>
<div class = "progress">
<div class = "progress-bar bg-warning progress-bar-striped progress-bar-animated"
role = "progressbar" style = "width: 75%"
aria-valuenow = "75" aria-valuemin = "0" aria-valuemax = "100">75% CSS Score
</div>
</div>
<div class = "progress">
<div class = "progress-bar bg-danger progress-bar-striped progress-bar-animated"
role = "progressbar" style = "width: 100%"
aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100">100% Javascript Score
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Multibars
Super Easy To Create Progressss Bars With Some MarkUp
Code Snippet To Achieve The Above Results
<div class = "progress" style = "height: 25px;">
<div class = "progress-bar" role = "progressbar" style = "width: 15%" aria-valuenow = "15"
aria-valuemin = "0" aria-valuemax = "100">15% Iron
</div>
<div class = "progress-bar bg-success" role = "progressbar" style = "width: 30%"
aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100">30% Copper
</div>
<div class = "progress-bar bg-info" role = "progressbar" style = "width: 20%"
aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100">20% Zinc
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Animate The Progress Bars Size On visibility
Pass simple javascript parameters to animate the progress bars on visibility
Code Snippet To Achieve The Above Results
<div class = "progress wdpk-width-animated">
<div class = "progress-bar bg-success progress-bar-striped progress-bar-animated "
role = "progressbar"
style = "width: 0%"
id = "wdpk-progress-width-1"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100">25% PHP Score
</div>
</div>
<div class = "progress wdpk-width-animated">
<div class = "progress-bar bg-info progress-bar-striped progress-bar-animated"
role = "progressbar"
style = "width: 0%"
id = "wdpk-progress-width-2"
aria-valuenow = "50"
aria-valuemin = "0" aria-valuemax = "100">50% HTML Score
</div>
</div>
<div class = "progress wdpk-width-animated">
<div class = "progress-bar bg-warning progress-bar-striped progress-bar-animated"
role = "progressbar" style = "width: 0%"
id = "wdpk-progress-width-3"
aria-valuenow = "75" aria-valuemin = "0" aria-valuemax = "100">75% CSS Score
</div>
</div>
<div class = "progress wdpk-width-animated">
<div class = "progress-bar bg-danger progress-bar-striped progress-bar-animated "
role = "progressbar" style = "width: 0%"
id = "wdpk-progress-width-4"
aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100">100% Javascript Score
</div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".progress").length !== 0)
{
let obj = {
selectorID: 'wdpk-progress-width-1',
duration: 2500,
width: '25%',
};
let obj2 = {
selectorID: 'wdpk-progress-width-2',
duration: 2500,
width: '50%',
};
let obj3 = {
selectorID: 'wdpk-progress-width-3',
duration: 2500,
width: '75%',
};
let obj4 = {
selectorID: 'wdpk-progress-width-4',
duration: 2500,
width: '100%',
};
require(["app/shortcodes/wdpkAnimateProgress"], function (e)
{
e.publicCall(obj);
e.publicCall(obj2);
e.publicCall(obj3);
e.publicCall(obj4);
});
}
});
