Да. и анимированное тоже можно, чего бы нет 🤪
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>"
Да. и анимированное тоже можно, чего бы нет 🤪
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>"
Gradient
Yaqinda bir nechta dizaynerlarning ishini ko‘rgandim, background’ning har joyiga gradient berib qo‘yishgan, natijada dizayn ko‘zga yoqimsiz ko‘rinishga kelib qolgan ekan. Aslida dizaynda gradient ishlatish yaxshi. Lekin gradientni ham o‘rnida va eplab ishlatish kerak. Aksiga olib, gradientsiz holatda taqdimot qilishganda ham ko‘zga yoqimliroq ko‘rinar edi, nazarimda.
Umuman olganda, UI dizaynida gradientlar bilan ishlashda o'tkir va keskin ranglardan ko‘ra, sokinlikni ifodalovchi, yumshoq va bilinmas gradientlardan foydalanish maqsadga muvofiq. Bu esa ko‘rish uchun yoqimliroq taassurot qoldiradi.
— Tavsiya, gradient ustidan qora rangli matn yoki qora rangli elementlar ishlatmaslikka harakat qiling. Uni oʻrniga gradient ustiga ishlatadigan matnlaringiz boʻlsa oq rangda qoʻllashga moslashtiring. Odatda gradient bilan uning ustidagi qora ranglar chiqishmaydi, yoinki yoqimsiz koʻrinadi.
@suxrobblog | #fikrlar#gradient
Gradient
Yaqinda bir nechta dizaynerlarning ishini ko‘rgandim, background’ning har joyiga gradient berib qo‘yishgan, natijada dizayn ko‘zga yoqimsiz ko‘rinishga kelib qolgan ekan. Aslida dizaynda gradient ishlatish yaxshi. Lekin gradientni ham o‘rnida va eplab ishlatish kerak. Aksiga olib, gradientsiz holatda taqdimot qilishganda ham ko‘zga yoqimliroq ko‘rinar edi, nazarimda.
Umuman olganda, UI dizaynida gradientlar bilan ishlashda o'tkir va keskin ranglardan ko‘ra, sokinlikni ifodalovchi, yumshoq va bilinmas gradientlardan foydalanish maqsadga muvofiq. Bu esa ko‘rish uchun yoqimliroq taassurot qoldiradi.
— Tavsiya, gradient ustidan qora rangli matn yoki qora rangli elementlar ishlatmaslikka harakat qiling. Uni oʻrniga gradient ustiga ishlatadigan matnlaringiz boʻlsa oq rangda qoʻllashga moslashtiring. Odatda gradient bilan uning ustidagi qora ranglar chiqishmaydi, yoinki yoqimsiz koʻrinadi.
@suxrobblog | #fikrlar#gradient