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

CodeFunctionName
What is this?

Public

Tested

Original Work
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)

Views 1,221

Downloads 454

CodeID
DB ID

ANmarAmdeen
604
Attachments
Revisions

v1.0

Saturday
February
1
2020