نمایش درصد بارگذاری اولیهی یک برنامهی Blazor WASM در دات نت 7
اگر یک برنامهی جدید blazor wasm را در دات نت 7، برای مثال با دستور dotnet new blazorwasm --hosted ایجاد کنیم، با اجرای آن، یک progress-bar حلقوی نمایش میزان درصد بارگذاری اولیهی برنامه ظاهر میشود که به نوعی پیاده سازی توکار نکات مطلب جاری است. این پیاده سازی از اجزای زیر تشکیل شدهاست:
الف) تغییرات فایل index.html برنامه
برای این منظور، فایل Client\wwwroot\index.html به صورت زیر تغییر کردهاست:
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
که در اینجا progress-bar حلقوی را با یک طرح SVG ایجاد کردهاند.
ب) تغییرات فایل app.css برنامه
کلاسهای progress-bar را به این صورت در فایل Client\wwwroot\css\app.css اضافه کردهاند:
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
روش سفارشی سازی این progress-bar بر اساس دو CSS variable فوق صورت میگیرد:
--blazor-load-percentage: درصد بارگذاری جاری را مقدار دهی میکند.
--blazor-load-percentage-text: متن Loading نمایش داده شده را مشخص میکند.
برای مثال اگر علاقمند باشیم بجای SVG پیشفرض
از progress-bar توکار خود فریمورک بوتاسترپ استفاده کنیم، روش کار به صورت زیر خواهد بود:
<body>
<div id="app">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
style="width: var(--blazor-load-percentage, 0%)">
<div class="loading-text"></div>
</div>
</div>
که در اینجا همان CSS variable معادل درصد بارگذاری، بجای width استفاده شده تا به صورت خودکار سبب پیشرفت progress-bar شود. همچنین کلاس جدید loading-text را هم همانند loading-progress-text:after موجود به صورت زیر به فایل app.css اضافه میکنیم تا سبب نمایش متن درصد پیشرفت جاری نیز شود:
.loading-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}