:root { --van-loading-text-color: var(--van-text-color-2); --van-loading-text-font-size: var(--van-font-size-md); --van-loading-spinner-color: var(--van-gray-5); --van-loading-spinner-size: 30px; --van-loading-spinner-duration: 0.8s; } .van-loading { position: relative; color: var(--van-loading-spinner-color); font-size: 0; vertical-align: middle; } .van-loading__spinner { position: relative; display: inline-block; width: var(--van-loading-spinner-size); max-width: 100%; height: var(--van-loading-spinner-size); max-height: 100%; vertical-align: middle; animation: van-rotate var(--van-loading-spinner-duration) linear infinite; } .van-loading__spinner--spinner { animation-timing-function: steps(12); } .van-loading__spinner--circular { animation-duration: 2s; } .van-loading__line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .van-loading__line:before { display: block; width: 2px; height: 25%; margin: 0 auto; background-color: currentColor; border-radius: 40%; content: " "; } .van-loading__circular { display: block; width: 100%; height: 100%; } .van-loading__circular circle { animation: van-circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round; } .van-loading__text { display: inline-block; margin-left: var(--van-padding-xs); color: var(--van-loading-text-color); font-size: var(--van-loading-text-font-size); vertical-align: middle; } .van-loading--vertical { display: flex; flex-direction: column; align-items: center; } .van-loading--vertical .van-loading__text { margin: var(--van-padding-xs) 0 0; } @keyframes van-circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } to { stroke-dasharray: 90, 150; stroke-dashoffset: -120; } } .van-loading__line--1 { transform: rotate(30deg); opacity: 1; } .van-loading__line--2 { transform: rotate(60deg); opacity: 0.9375; } .van-loading__line--3 { transform: rotate(90deg); opacity: 0.875; } .van-loading__line--4 { transform: rotate(120deg); opacity: 0.8125; } .van-loading__line--5 { transform: rotate(150deg); opacity: 0.75; } .van-loading__line--6 { transform: rotate(180deg); opacity: 0.6875; } .van-loading__line--7 { transform: rotate(210deg); opacity: 0.625; } .van-loading__line--8 { transform: rotate(240deg); opacity: 0.5625; } .van-loading__line--9 { transform: rotate(270deg); opacity: 0.5; } .van-loading__line--10 { transform: rotate(300deg); opacity: 0.4375; } .van-loading__line--11 { transform: rotate(330deg); opacity: 0.375; } .van-loading__line--12 { transform: rotate(360deg); opacity: 0.3125; }