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 & "<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 105 Downloads 30

Classic ASP Graphics
ANmarAmdeen
695
Attachments
Revisions

v1.0