._loading__code__box_1sjii_52 { --loading-dy-color-1: var(--skin__primary); --loading-dy-color-2: var(--skin__primary); }
._loading__code__box_1sjii_52 ._demo1_1sjii_58 ._loader_1sjii_61 { width: 0.5rem; aspect-ratio: 1 / 1; border-radius: 50%; border-width: 0.08rem; border-style: solid; border-image: none; border-color: var(--loading-dy-color-1) transparent; animation: 1s ease 0s infinite normal none running _l7_1sjii_1; }
@keyframes _l7_1sjii_1 { 
  100% { transform: rotate(0.5turn); }
}
._loading__code__box_1sjii_52 ._demo3_1sjii_74 ._loader_1sjii_61 { width: 0.85rem; height: 0.5rem; --g1: conic-gradient( from 90deg at left .03rem top .03rem, var(--loading-dy-color-1) 90deg, var(--loading-dy-color-1) 0 ); --g2: conic-gradient( from -90deg at bottom .03rem right .03rem, var(--loading-dy-color-1) 0 90deg, var(--loading-dy-color-1) 0 ); background-image: ; background-size: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-position: left center, center center, right center; background-repeat: no-repeat; animation: 1s ease 0s infinite normal none running _square-1_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo3_1sjii_74 ._loader_1sjii_61 { background-position: right center, center center, left center; }
@keyframes _square-1_1sjii_1 { 
  0% { background-size: 0.25rem 50%, 0.25rem 50%, 0.25rem 50%; }
  25% { background-size: 0.25rem 100%, 0.25rem 50%, 0.25rem 50%; }
  50% { background-size: 0.25rem 50%, 0.25rem 100%, 0.25rem 50%; }
  75% { background-size: 0.25rem 50%, 0.25rem 50%, 0.25rem 100%; }
  100% { background-size: 0.25rem 50%, 0.25rem 50%, 0.25rem 50%; }
}
._loading__code__box_1sjii_52 ._demo6_1sjii_112 ._loader_1sjii_61 { height: 0.6rem; aspect-ratio: 2 / 1; border-bottom: 0.1rem solid transparent; background: linear-gradient(90deg,var(--loading-dy-color-1) 50%,transparent 0) -25% 100%/50% .1rem repeat-x border-box; position: relative; animation: 0.75s linear 0s infinite normal none running _bouncing1-0_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo6_1sjii_112 ._loader_1sjii_61 { background: linear-gradient(-90deg,var(--loading-dy-color-1) 50%,transparent 0) -25% 100%/50% .1rem repeat-x border-box; }
._loading__code__box_1sjii_52 ._demo6_1sjii_112 ._loader_1sjii_61::before { content: ""; position: absolute; inset: auto 42.5% 0px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--loading-dy-color-2); animation: 0.75s cubic-bezier(0, 900, 1, 900) 0s infinite normal none running _bouncing1-1_1sjii_1; }
@keyframes _bouncing1-0_1sjii_1 { 
  100% { background-position: -125% 100%; }
}
@keyframes _bouncing1-1_1sjii_1 { 
  0%, 2% { bottom: 0%; }
  98%, 100% { bottom: 0.1%; }
}
._loading__code__box_1sjii_52 ._demo7_1sjii_142 ._loader_1sjii_61 { width: 1.2rem; height: 0.22rem; border-radius: 0.2rem; color: var(--loading-dy-color-1); border: 0.02rem solid; position: relative; }
._loading__code__box_1sjii_52 ._demo7_1sjii_142 ._loader_1sjii_61::before { content: ""; position: absolute; margin: 0.02rem; inset: 0px 100% 0px 0px; border-radius: inherit; background: currentcolor; animation: 2s ease 0s infinite normal none running _l30_1sjii_1; }
@keyframes _l30_1sjii_1 { 
  100% { inset: 0px; }
}
._loading__code__box_1sjii_52 ._demo8_1sjii_167 ._loader_1sjii_61 { width: 1.2rem; height: 0.24rem; mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0)) 0px 0px / 25% 100%, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) center center / calc(100% - 0.12rem) calc(100% - 0.12rem) no-repeat; background: linear-gradient(var(--loading-dy-color-1) 0 0) 0/0% no-repeat #ddd; animation: 2s linear 0s infinite normal none running _l31_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo8_1sjii_167 ._loader_1sjii_61 { background: linear-gradient(var(--loading-dy-color-1) 0 0) 100%/0% no-repeat #ddd; }
@keyframes _l31_1sjii_1 { 
  100% { background-size: 100%; }
}
._loading__code__box_1sjii_52 ._demo9_1sjii_182 ._loader_1sjii_61 { --r1: 154%; --r2: 68.5%; width: 0.6rem; aspect-ratio: 1 / 1; border-radius: 50%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 50.5% 220%; background-position: -100% 0%, 0% 0%, 100% 0%; background-repeat: no-repeat; animation: 2s linear 0s infinite normal none running _l32_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo9_1sjii_182 ._loader_1sjii_61 { background-position: 200% 0%, 100% 0%, 0% 0%; }
@keyframes _l32_1sjii_1 { 
  33% { background-position: 0% 33%, 100% 33%, 200% 33%; }
  66% { background-position: -100% 66%, 0% 66%, 100% 66%; }
  100% { background-position: 0% 100%, 100% 100%, 200% 100%; }
}
._loading__code__box_1sjii_52 ._demo11_1sjii_208 ._loader_1sjii_61 { width: 1.2rem; height: 0.2rem; background-image: ; background-position-x: ; background-position-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: calc(16.6667% + 0.01rem) 200%; background-repeat: no-repeat; animation: 2s ease 0s infinite normal none running _l34_1sjii_1; }
@keyframes _l34_1sjii_1 { 
  0% { background-position: 0% 100%, 20% 0%, 40% 100%, 60% 0%, 80% 100%, 100% 0%; }
  16.67% { background-position: 0% 0%, 20% 0%, 40% 100%, 60% 0%, 80% 100%, 100% 0%; }
  33.33% { background-position: 0% 0%, 20% 100%, 40% 100%, 60% 0%, 80% 100%, 100% 0%; }
  50% { background-position: 0% 0%, 20% 100%, 40% 0%, 60% 0%, 80% 100%, 100% 0%; }
  66.67% { background-position: 0% 0%, 20% 100%, 40% 0%, 60% 100%, 80% 100%, 100% 0%; }
  83.33% { background-position: 0% 0%, 20% 100%, 40% 0%, 60% 100%, 80% 0%, 100% 0%; }
  100% { background-position: 0% 0%, 20% 100%, 40% 0%, 60% 100%, 80% 0%, 100% 100%; }
}
._loading__code__box_1sjii_52 ._demo12_1sjii_242 ._loader_1sjii_61 { width: 1.24rem; height: 0.24rem; mask: conic-gradient(from 135deg at center top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 0.5deg, rgb(0, 0, 0) 90deg, rgba(0, 0, 0, 0) 90.5deg) 0px 0px / 25% 50% repeat-x, conic-gradient(from -45deg at center bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 0.5deg, rgb(0, 0, 0) 90deg, rgba(0, 0, 0, 0) 90.5deg) 0px 100%; background: linear-gradient(var(--loading-dy-color-1) 0 0) left/0% 100% no-repeat #ddd; animation: 2s linear 0s infinite normal none running _l35_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo12_1sjii_242 ._loader_1sjii_61 { background: linear-gradient(var(--loading-dy-color-1) 0 0) right/0% 100% no-repeat #ddd; }
@keyframes _l35_1sjii_1 { 
  100% { background-size: 100% 100%; }
}
._loading__code__box_1sjii_52 ._demo13_1sjii_259 ._loader_1sjii_61 { height: 0.16rem; width: 1.3rem; --c: no-repeat linear-gradient(var(--loading-dy-color-1) 0 0); background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 60% 100%; animation: 3s ease 0s infinite normal none running _l36_1sjii_1; }
@keyframes _l36_1sjii_1 { 
  0% { background-position: -150% 0px, -150% 0px; }
  66% { background-position: 250% 0px, -150% 0px; }
  100% { background-position: 250% 0px, 250% 0px; }
}
._loading__code__box_1sjii_52 ._demo14_1sjii_281 ._loader_1sjii_61 { width: 1.2rem; height: 0.2rem; mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0)) left center / 20% 100%; background: linear-gradient(var(--loading-dy-color-1) 0 0) left/0% 100% no-repeat #ddd; animation: 2s steps(6) 0s infinite normal none running _l37_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo14_1sjii_281 ._loader_1sjii_61 { background: linear-gradient(var(--loading-dy-color-1) 0 0) right/0% 100% no-repeat #ddd; }
@keyframes _l37_1sjii_1 { 
  100% { background-size: 120% 100%; }
}
._loading__code__box_1sjii_52 ._demo15_1sjii_296 ._loader_1sjii_61 { width: 0.6rem; aspect-ratio: 1 / 1; border: .15rem solid var(--loading-dy-color-1); border-radius: 50%; position: relative; transform: rotate(45deg); }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo15_1sjii_296 ._loader_1sjii_61 { transform: rotate(-45deg); }
._loading__code__box_1sjii_52 ._demo15_1sjii_296 ._loader_1sjii_61::before { content: ""; position: absolute; inset: -0.15rem; border-radius: 50%; border: 0.15rem solid rgb(221, 221, 221); animation: 2s linear 0s infinite normal none running _l38_1sjii_1; }
@keyframes _l38_1sjii_1 { 
  0% { clip-path: polygon(50% 50%, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px); }
  25% { clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 0px, 100% 0px, 100% 0px); }
  50% { clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 100% 100%, 100% 100%); }
  75% { clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 100%); }
  100% { clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 0px); }
}
._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61 { width: 0.4rem; aspect-ratio: 1 / 1; display: grid; }
._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61::before, ._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61::after { content: ""; grid-area: 1 / 1; --c: no-repeat linear-gradient(var(--loading-dy-color-1) 0 0); background: var(--c) 0 0,var(--c) 100% 0,var(--c) 100% 100%,var(--c) 0 100%; animation: 2s linear 0s infinite normal none running _line1-1_1sjii_1, 2s linear 0s infinite normal none running _line1-2_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61::before, [dir="rtl"] ._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61::after { background: var(--c) 100% 0,var(--c) 0% 0,var(--c) 0% 100%,var(--c) 100% 100%; }
._loading__code__box_1sjii_52 ._demo16_1sjii_332 ._loader_1sjii_61::after { margin: 25%; transform: scale(-1); }
@keyframes _line1-1_1sjii_1 { 
  0% { background-size: 0px 0.04rem, 0.04rem 0px, 0px 0.04rem, 0.04rem 0px; }
  12.5% { background-size: 100% 0.04rem, 0.04rem 0px, 0px 0.04rem, 0.04rem 0px; }
  25% { background-size: 100% 0.04rem, 0.04rem 100%, 0px 0.04rem, 0.04rem 0px; }
  37.5% { background-size: 100% 0.04rem, 0.04rem 100%, 100% 0.04rem, 0.04rem 0px; }
  45%, 55% { background-size: 100% 0.04rem, 0.04rem 100%, 100% 0.04rem, 0.04rem 100%; }
  62.5% { background-size: 0px 0.04rem, 0.04rem 100%, 100% 0.04rem, 0.04rem 100%; }
  75% { background-size: 0px 0.04rem, 0.04rem 0px, 100% 0.04rem, 0.04rem 100%; }
  87.5% { background-size: 0px 0.04rem, 0.04rem 0px, 0px 0.04rem, 0.04rem 100%; }
  100% { background-size: 0px 0.04rem, 0.04rem 0px, 0px 0.04rem, 0.04rem 0px; }
}
@keyframes _line1-2_1sjii_1 { 
  0%, 49.9% { background-position: 0px 0px, 100% 0px, 100% 100%, 0px 100%; }
  50%, 100% { background-position: 100% 0px, 100% 100%, 0px 100%, 0px 0px; }
}
._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61 { width: 0.5rem; aspect-ratio: 1 / 1; display: grid; }
._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::before, ._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::after { content: ""; grid-area: 1 / 1; margin: 0px 0px 0.15rem 0.15rem; --c: transparent calc(100% / 3), var(--loading-dy-color-1) 0 calc(2 * 100% / 3), transparent 0; --c1: linear-gradient(90deg, var(--c)); --c2: linear-gradient(0deg, var(--c)); background-image: ; background-position-x: ; background-position-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 300% 0.04rem, 0.04rem 300%; background-repeat: no-repeat; animation: 1s linear 0s infinite normal none running _line2_1sjii_1; }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::before, [dir="rtl"] ._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::after { margin: 0px 0.15rem 0.15rem 0px; }
._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::after { margin: 0.15rem 0.15rem 0px 0px; transform: scale(-1); }
[dir="rtl"] ._loading__code__box_1sjii_52 ._demo17_1sjii_389 ._loader_1sjii_61::after { margin: 0.15rem 0px 0px 0.15rem; }
@keyframes _line2_1sjii_1 { 
  0% { background-position: 50% 0px, 100% 100%, 0px 100%, 0px 0px; }
  25% { background-position: 0px 0px, 100% 50%, 0px 100%, 0px 0px; }
  50% { background-position: 0px 0px, 100% 0px, 50% 100%, 0px 0px; }
  75% { background-position: 0px 0px, 100% 0px, 100% 100%, 0px 50%; }
  75.01% { background-position: 100% 0px, 100% 0px, 100% 100%, 0px 50%; }
  100% { background-position: 50% 0px, 100% 0px, 100% 100%, 0px 100%; }
}