<div class="radikalwp-card-stat"><div class="radikalwp-card-stat-row"><span class="radikalwp-card-stat-value">۷۲٪<//span><span class="radikalwp-card-stat-label">رضایت کاربران<//span><//div><div class="radikalwp-card-stat-bar"><span class="radikalwp-card-stat-fill" style="width:72%"><//span><//div><p class="radikalwp-card-stat-note">۱۲ درصد رشد نسبت به ماه گذشته<//p><//div>
.radikalwp-card-stat {
max-width: 300px;
padding: 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.radikalwp-card-stat-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}
.radikalwp-card-stat-value {
font-size: 30px;
font-weight: 900;
color: #4f46e5;
font-variant-numeric: tabular-nums;
}
.radikalwp-card-stat-label { font-size: 13px; font-weight: 700; color: #334155; }
.radikalwp-card-stat-bar {
height: 10px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.radikalwp-card-stat-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 999px;
}
.radikalwp-card-stat-note {
margin: 12px 0 0;
font-size: 11.5px;
color: #059669;
}
درباره این اسنیپت
کارت نمایش آمار با عدد بزرگ، برچسب توضیحی و نوار پیشرفت رنگی که سهم دستیافته را نشان میدهد. برای داشبوردها، صفحات گزارش و بخش «دستاوردها» طراحی شده و اعداد را با فونت درشت و ایتالیکزداییشده نمایش میدهد. نوار با گرادیان برند پر میشود و انتهای گرد آن ظاهری نرم میسازد. با تغییر دو عدد، برای هر معیاری قابل استفاده است.
پرسشهای متداول
مقدار width در style نوار پرکننده (span دوم) را تغییر دهید. عدد متن بالا صرفاً نمایشی است و باید همراستا با آن بهروزرسانی شود.
بله؛ گرادیان کلاس fill را در یک کلاس کمکی جدا بازنویسی کنید. مثلاً نسخه سبز یا نارنجی برای معیارهای مختلف داشبورد.
این نسخه CSS خالص است؛ برای شمارنده متحرک میتوانید اسنیپت شمارنده جاوااسکریپتی رادیکالدبلیوپی را کنار همین کارت استفاده کنید و عدد را با JS بهروزرسانی کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!