This media is not supported in your browser
VIEW IN TELEGRAM
Да. и анимированное тоже можно, чего бы нет 🤪
Animated SVG =
// Calculate the maximum utilization from the 'Table'
VAR _Percentage =INT(IF([% Выполнения]>=1,1,[% Выполнения]) *100 )
// Format the utilization percentage for display
VAR _PercentageFormate = FORMAT(_Percentage, "#0")
// Calculate the width of the progress bar based on the utilization percentage
VAR _ProgressBar = _Percentage
// Construct the SVG image with dynamic values
RETURN
"data:image/svg+xml;utf8," &
"<svg width='120' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='https://lnkd.in/dZ5ikEfb' display='block' overflow='visible'>
<defs>
<!-- Define a linear gradient for the progress bar -->
<linearGradient id='gradient' x1='0%' y1='0%' x2='80%' y2='0%' gradientUnits='userSpaceOnUse'>
<stop offset='45%' style='stop-color: #24D1DB' />
<stop offset='130%' style='stop-color: #0FF14E'/>
</linearGradient>
</defs>
<!-- Background rectangle for the entire SVG -->
<rect x='0' y='0' width='120' height='20' rx='10' ry='10' style='fill: #F4F4F4'/>
<!-- Rectangle for the label background -->
<rect x='2.5' y='2.4' width='37' height='15' rx='8' ry='8' style='fill: #000000' />
<!-- Label text displaying the utilization percentage -->
<text x='22' y='11.2' fill='white' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-weight='bold' font-size='12'> "& INT([% Выполнения]*100 ) &" <tspan font-size='8' fill='white'> % </tspan> </text>
<!-- Progress bar rectangle with animation -->
<rect x='42.5' y='2.4' width='"& _ProgressBar &"' height='15' rx='8' ry='8' style='fill: url(#gradient)'>
<!-- Animation to gradually increase the width of the progress bar (a Code by Rahun Singh Chundawat)-->
<animate attributeName='width' from='0' to='"& _ProgressBar -25&"' dur='4s' fill='freeze'/>
</rect>
</svg>"
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥74❤8👏4👍1