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
CardTemplate = ""
CardTemplate = CardTemplate & " <div class=""row my-2"" > <div class=""col-md-3 text-right"" >" & vbcrlf
CardTemplate = CardTemplate & " <a href=""{{$Link$}}"" >{{$Caption$}} </a >"
CardTemplate = CardTemplate & " </div > <div class=""col"" >"
CardTemplate = CardTemplate & " <div class=""progress"" style=""height: 30px;"" >" & vbcrlf
CardTemplate = CardTemplate & " <div class=""progress-bar {{$BG$}}"" role=""progressbar"" aria-valuemin=""0"" aria-valuemax=""{{$Max$}}"" "
CardTemplate = CardTemplate & " style=""width: calc({{$Val$}}/{{$Max$}} *100%)"" aria-valuenow=""{{$Val$}}"" >{{$Val$}} </div >" & vbcrlf
CardTemplate = CardTemplate & " </div >" & vbcrlf
CardTemplate = CardTemplate & " </div > </div >" & 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)
CardTemplate = CardTemplate & " <div class=""row my-2"" > <div class=""col-md-3 text-right"" >" & vbcrlf
CardTemplate = CardTemplate & " <a href=""{{$Link$}}"" >{{$Caption$}} </a >"
CardTemplate = CardTemplate & " </div > <div class=""col"" >"
CardTemplate = CardTemplate & " <div class=""progress"" style=""height: 30px;"" >" & vbcrlf
CardTemplate = CardTemplate & " <div class=""progress-bar {{$BG$}}"" role=""progressbar"" aria-valuemin=""0"" aria-valuemax=""{{$Max$}}"" "
CardTemplate = CardTemplate & " style=""width: calc({{$Val$}}/{{$Max$}} *100%)"" aria-valuenow=""{{$Val$}}"" >{{$Val$}} </div >" & vbcrlf
CardTemplate = CardTemplate & " </div >" & vbcrlf
CardTemplate = CardTemplate & " </div > </div >" & 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 1,213
Downloads 446
CodeID
DB ID
ANmarAmdeen
602
Revisions
v1.0
Saturday
February
1
2020