Bootstrap 4 progress bars variables

Enhanced way to use progress bars in Bootstrap 4
Using below variable (CardTemplate), we do not need to change percentage of the bar, just put the Max and the Now values
Max value means aria-valuemax
Now value means aria-valuenow

It is a CSS trick to calculate the percentage on fly


Public

Tested

My Own Work
CardTemplate            = ""
CardTemplate            = CardTemplate & "" & vbcrlf
CardTemplate            = CardTemplate & "{{$Caption$}}"
CardTemplate            = CardTemplate & "
"
CardTemplate            = CardTemplate & "" & vbcrlf
CardTemplate            = CardTemplate & "CardTemplate            = CardTemplate & " style=""width: calc({{$Val$}}/{{$Max$}} *100%)"" aria-valuenow=""{{$Val$}}"" >{{$Val$}}
" & vbcrlf
CardTemplate            = CardTemplate & "
" & vbcrlf
CardTemplate            = CardTemplate & "
" & vbcrlf
CardTemplate            = CardTemplate & ""

'To use ...
'=======================================
ThisCardM            = CardTemplate
ThisCardM            = Replace(ThisCardM, "{{$BG$}}", "bg-primary")
ThisCardM            = Replace(ThisCardM, "{{$Caption$}}", MonthName1(ThisMonth, 2) & "-" & ThisYear)
ThisCardM            = Replace(ThisCardM, "{{$Link$}}", BrMonthly_URL & "?M=" & DateSerial(ThisYear, ThisMonth, 1))
ThisCardM            = Replace(ThisCardM, "{{$Val$}}", ThisCount)
ThisCardM            = Replace(ThisCardM, "{{$Max$}}", CoMax)

Views 448 Downloads 138

Classic ASP Graphics
ANmarAmdeen
747
Attachments
Revisions

v1.0