tabler/preview/pages/_includes/cards/social-traffic.html

{% assign services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,Pinterest:420' | split: ',' %}
<div class="card">
	<div class="card-header">
		<h3 class="card-title">Social Media Traffic</h3>
	</div>
	<table class="table card-table table-vcenter">
		<thead>
		<tr>
			<th>Network</th>
			<th colspan="2">Visitors</th>
		</tr>
		</thead>
		<tbody>
		{% for service in services %}
		{% assign s = service | split: ':' %}
		<tr>
			<td>{{ s[0] }}</td>
			<td>{{ s[1] | format_number }}</td>
			<td class="w-50">
				<div class="progress progress-xs">

					<div class="progress-bar bg-primary" style="width: {{ s[1] | divided_by: 5000.0 | times: 100 }}%"></div>
				</div>
			</td>
		</tr>
		{% endfor %}
		</tbody>
	</table>
</div>