Fix RadarSpinner component

pull/18098/head
liangshiwei 2 years ago
parent be9ab859db
commit 544d876a6f

@ -17,5 +17,6 @@ public class BlazorGlobalStyleContributor : BundleContributor
context.Files.AddIfNotContains("/_content/Blazorise/blazorise.css");
context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
context.Files.AddIfNotContains("/_content/Blazorise.Snackbar/blazorise.snackbar.css");
context.Files.AddIfNotContains("/_content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css");
}
}

@ -26,5 +26,6 @@ public class ComponentsComponentsBundleContributor : IBundleContributor
context.Add("_content/Blazorise/blazorise.css");
context.Add("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
context.Add("_content/Blazorise.Snackbar/blazorise.snackbar.css");
context.Add("_content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css");
}
}

@ -0,0 +1,60 @@
.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);
}
}
Loading…
Cancel
Save