Skip to content

Commit

Permalink
feat(blazorui): add Class and Style parameters to BitLoading components
Browse files Browse the repository at this point in the history 
#6392 (#6690)
  • Loading branch information
@mhrastegari
mhrastegari authored Jan 23, 2024
1 parent a921316 commit ad2fa4a
Show file tree
Hide file tree
Showing 14 changed files with 237 additions and 137 deletions.
23 changes: 14 additions & 9 deletions src/BlazorUI/Bit.BlazorUI/Components/Loading/BitBarsLoading.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,38 @@
@inherits BitLoadingComponentBase

<style>
.blazor-loading-bars {
.bit-ldn-Bars {
display: inline-block;
position: relative;
width: @(Size)px;
height: @(Size)px;
}
.blazor-loading-bars div {
.bit-ldn-Bars div {
display: inline-block;
position: absolute;
left: @(Convert(8))px;
width: @(Convert(16))px;
background: @Color;
animation: blazor-loading-bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
animation: bit-ldn-Bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.blazor-loading-bars div:nth-child(1) {
.bit-ldn-Bars div:nth-child(1) {
left: @(Convert(8))px;
animation-delay: -0.24s;
}
.blazor-loading-bars div:nth-child(2) {
.bit-ldn-Bars div:nth-child(2) {
left: @(Convert(32))px;
animation-delay: -0.12s;
}
.blazor-loading-bars div:nth-child(3) {
.bit-ldn-Bars div:nth-child(3) {
left: @(Convert(56))px;
animation-delay: 0;
}
@@keyframes blazor-loading-bars {
@@keyframes bit-ldn-Bars {
0% {
top: @(Convert(8))px;
height: @(Convert(64))px;
Expand All @@ -44,6 +44,11 @@
height: @(Convert(32))px;
}
}
</style>
<div class="blazor-loading-bars"><div></div><div></div><div></div></div>

<div style="@Style" class="bit-ldn-Bars @Class">
@for (int i = 0; i < 3; i++)
{
<div style="@ChildStyle" class="@ChildClass"></div>
}
</div>
13 changes: 8 additions & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Loading/BitCircleLoading.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
}

<style>
.blazor-loading-circle {
.bit-ldn-Circle {
display: inline-block;
transform: translateZ(1px);
}
.blazor-loading-circle > div {
.bit-ldn-Circle > div {
display: inline-block;
width: @(Size)px;
height: @(Size)px;
margin: @(Convert(8))px;
border-radius: 50%;
background: @Color;
animation: blazor-loading-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
animation: bit-ldn-Circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@@keyframes blazor-loading-circle {
@@keyframes bit-ldn-Circle {
0%, 100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
Expand All @@ -40,4 +40,7 @@
}
}
</style>
<div class="blazor-loading-circle"><div></div></div>

<div style="@Style" class="bit-ldn-Circle @Class">
<div style="@ChildStyle" class="@ChildClass"></div>
</div>
40 changes: 23 additions & 17 deletions src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDotsRingLoading.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,95 @@
@inherits BitLoadingComponentBase

<style>
.blazor-loading-dots-ring {
.bit-ldn-DotsRing {
display: inline-block;
position: relative;
width: @(Size)px;
height: @(Size)px;
}
.blazor-loading-dots-ring div {
.bit-ldn-DotsRing div {
position: absolute;
width: @(Convert(6))px;
height: @(Convert(6))px;
background: @Color;
border-radius: 50%;
animation: blazor-loading-dots-ring 1.2s linear infinite;
animation: bit-ldn-DotsRing 1.2s linear infinite;
}
.blazor-loading-dots-ring div:nth-child(1) {
.bit-ldn-DotsRing div:nth-child(1) {
animation-delay: 0s;
top: @(Convert(37))px;
left: @(Convert(66))px;
}
.blazor-loading-dots-ring div:nth-child(2) {
.bit-ldn-DotsRing div:nth-child(2) {
animation-delay: -0.1s;
top: @(Convert(22))px;
left: @(Convert(62))px;
}
.blazor-loading-dots-ring div:nth-child(3) {
.bit-ldn-DotsRing div:nth-child(3) {
animation-delay: -0.2s;
top: @(Convert(11))px;
left: @(Convert(52))px;
}
.blazor-loading-dots-ring div:nth-child(4) {
.bit-ldn-DotsRing div:nth-child(4) {
animation-delay: -0.3s;
top: @(Convert(7))px;
left: @(Convert(37))px;
}
.blazor-loading-dots-ring div:nth-child(5) {
.bit-ldn-DotsRing div:nth-child(5) {
animation-delay: -0.4s;
top: @(Convert(11))px;
left: @(Convert(22))px;
}
.blazor-loading-dots-ring div:nth-child(6) {
.bit-ldn-DotsRing div:nth-child(6) {
animation-delay: -0.5s;
top: @(Convert(22))px;
left: @(Convert(11))px;
}
.blazor-loading-dots-ring div:nth-child(7) {
.bit-ldn-DotsRing div:nth-child(7) {
animation-delay: -0.6s;
top: @(Convert(37))px;
left: @(Convert(7))px;
}
.blazor-loading-dots-ring div:nth-child(8) {
.bit-ldn-DotsRing div:nth-child(8) {
animation-delay: -0.7s;
top: @(Convert(52))px;
left: @(Convert(11))px;
}
.blazor-loading-dots-ring div:nth-child(9) {
.bit-ldn-DotsRing div:nth-child(9) {
animation-delay: -0.8s;
top: @(Convert(62))px;
left: @(Convert(22))px;
}
.blazor-loading-dots-ring div:nth-child(10) {
.bit-ldn-DotsRing div:nth-child(10) {
animation-delay: -0.9s;
top: @(Convert(66))px;
left: @(Convert(37))px;
}
.blazor-loading-dots-ring div:nth-child(11) {
.bit-ldn-DotsRing div:nth-child(11) {
animation-delay: -1s;
top: @(Convert(62))px;
left: @(Convert(52))px;
}
.blazor-loading-dots-ring div:nth-child(12) {
.bit-ldn-DotsRing div:nth-child(12) {
animation-delay: -1.1s;
top: @(Convert(52))px;
left: @(Convert(62))px;
}
@@keyframes blazor-loading-dots-ring {
@@keyframes bit-ldn-DotsRing {
0%, 20%, 80%, 100% {
transform: scale(1);
}
Expand All @@ -100,4 +100,10 @@
}
}
</style>
<div class="blazor-loading-dots-ring"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div style="@Style" class="bit-ldn-DotsRing @Class">
@for (int i = 0; i < 12; i++)
{
<div style="@ChildStyle" class="@ChildClass"></div>
}
</div>
11 changes: 6 additions & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDualRingLoading.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
@inherits BitLoadingComponentBase

<style>
.blazor-loading-dual-ring {
.bit-ldn-DualRing {
display: inline-block;
width: @(Size)px;
height: @(Size)px;
}
.blazor-loading-dual-ring:after {
.bit-ldn-DualRing:after {
content: " ";
display: block;
width: @(Convert(64))px;
Expand All @@ -17,10 +17,10 @@
border-radius: 50%;
border: @(Convert(6))px solid @Color;
border-color: @Color transparent @Color transparent;
animation: blazor-loading-dual-ring 1.2s linear infinite;
animation: bit-ldn-DualRing 1.2s linear infinite;
}
@@keyframes blazor-loading-dual-ring {
@@keyframes bit-ldn-DualRing {
0% {
transform: rotate(0deg);
}
Expand All @@ -30,4 +30,5 @@
}
}
</style>
<div class="blazor-loading-dual-ring"></div>

<div style="@Style" class="bit-ldn-DualRing @Class"></div>
34 changes: 20 additions & 14 deletions src/BlazorUI/Bit.BlazorUI/Components/Loading/BitEllipsisLoading.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
@inherits BitLoadingComponentBase

<style>
.blazor-loading-ellipsis {
.bit-ldn-Ellipsis {
display: inline-block;
position: relative;
width: @(Size)px;
height: @(Size)px;
}
.blazor-loading-ellipsis div {
.bit-ldn-Ellipsis div {
position: absolute;
top: @(Convert(33))px;
width: @(Convert(13))px;
Expand All @@ -19,27 +19,27 @@
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.blazor-loading-ellipsis div:nth-child(1) {
.bit-ldn-Ellipsis div:nth-child(1) {
left: @(Convert(8))px;
animation: blazor-loading-ellipsis1 0.6s infinite;
animation: bit-ldn-Ellipsis1 0.6s infinite;
}
.blazor-loading-ellipsis div:nth-child(2) {
.bit-ldn-Ellipsis div:nth-child(2) {
left: @(Convert(8))px;
animation: blazor-loading-ellipsis2 0.6s infinite;
animation: bit-ldn-Ellipsis2 0.6s infinite;
}
.blazor-loading-ellipsis div:nth-child(3) {
.bit-ldn-Ellipsis div:nth-child(3) {
left: @(Convert(32))px;
animation: blazor-loading-ellipsis2 0.6s infinite;
animation: bit-ldn-Ellipsis2 0.6s infinite;
}
.blazor-loading-ellipsis div:nth-child(4) {
.bit-ldn-Ellipsis div:nth-child(4) {
left: @(Convert(56))px;
animation: blazor-loading-ellipsis3 0.6s infinite;
animation: bit-ldn-Ellipsis3 0.6s infinite;
}
@@keyframes blazor-loading-ellipsis1 {
@@keyframes bit-ldn-Ellipsis1 {
0% {
transform: scale(0);
}
Expand All @@ -49,7 +49,7 @@
}
}
@@keyframes blazor-loading-ellipsis3 {
@@keyframes bit-ldn-Ellipsis3 {
0% {
transform: scale(1);
}
Expand All @@ -59,7 +59,7 @@
}
}
@@keyframes blazor-loading-ellipsis2 {
@@keyframes bit-ldn-Ellipsis2 {
0% {
transform: translate(0, 0);
}
Expand All @@ -69,4 +69,10 @@
}
}
</style>
<div class="blazor-loading-ellipsis"><div></div><div></div><div></div><div></div></div>

<div style="@Style" class="bit-ldn-Ellipsis @Class">
@for (int i = 0; i < 4; i++)
{
<div style="@ChildStyle" class="@ChildClass"></div>
}
</div>
Loading

0 comments on commit ad2fa4a

Please sign in to comment.