Skip to content

Commit

Permalink
Add loading indicator and empty template to Datagrid
Browse files Browse the repository at this point in the history
  • Loading branch information
stsrki authored and cotur committed Jul 5, 2021
1 parent 21f0269 commit e2a769a
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,20 @@
ShowPager="@ShowPager"
CurrentPage="@CurrentPage"
PageSize="@PageSize">
<LoadingTemplate>
<Row Class="w-100 align-items-center" Style="height: 150px;">
<Column>
<RadarSpinner />
</Column>
</Row>
</LoadingTemplate>
<EmptyTemplate>
<Row Class="w-100 align-items-center" Style="height: 150px;">
<Column>
<Heading Size="HeadingSize.Is4" Alignment="TextAlignment.Center">No data available</Heading>
</Column>
</Row>
</EmptyTemplate>
<DataGridColumns>
@if (Columns != null)
{
Expand Down
27 changes: 27 additions & 0 deletions framework/src/Volo.Abp.BlazoriseUI/Components/RadarSpinner.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="d-flex justify-content-center">
<div class="radar-spinner">
<div class="circle">
<div class="circle-inner-container">
<div class="circle-inner"></div>
</div>
</div>

<div class="circle">
<div class="circle-inner-container">
<div class="circle-inner"></div>
</div>
</div>

<div class="circle">
<div class="circle-inner-container">
<div class="circle-inner"></div>
</div>
</div>

<div class="circle">
<div class="circle-inner-container">
<div class="circle-inner"></div>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,65 @@ div.dataTables_wrapper div.dataTables_length label {
margin-right: .5rem;
}

.radar-spinner, .radar-spinner * {
box-sizing: border-box;
}

.radar-spinner {
height: 60px;
width: 60px;
position: relative;
}

.radar-spinner .circle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
animation: radar-spinner-animation 2s infinite;
}

.radar-spinner .circle:nth-child(1) {
padding: calc(60px * 5 * 2 * 0 / 110);
animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(2) {
padding: calc(60px * 5 * 2 * 1 / 110);
animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(3) {
padding: calc(60px * 5 * 2 * 2 / 110);
animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(4) {
padding: calc(60px * 5 * 2 * 3 / 110);
animation-delay: 0ms;
}

.radar-spinner .circle-inner, .radar-spinner .circle-inner-container {
height: 100%;
width: 100%;
border-radius: 50%;
border: calc(60px * 5 / 110) solid transparent;
}

.radar-spinner .circle-inner {
border-left-color: var(--secondary, #ff1d5e);
border-right-color: var(--secondary, #ff1d5e);
}

@keyframes radar-spinner-animation {
50% {
transform: rotate(180deg);
}

100% {
transform: rotate(0deg);
}
}


0 comments on commit e2a769a

Please sign in to comment.