test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 3.28 kB
CSS
.nut-loading{position:relative;display:flex;justify-content:center;align-items:center}.nut-loading--fixed{position:fixed;top:0;left:0;width:100vw;height:100vh;align-items:flex-start;padding-top:var(--nutui-loading-fixed-padding-top, 30vh);background-color:var(--nutui-loading-fixed-background-color, var(--nsui-gray-color-1, #ffffff));z-index:1}.nut-loading--vertical{flex-direction:column}.nut-loading--vertical .nut-loading__text{margin-top:var(--nutui-loading-text-margin, 8px)}.nut-loading--horizontal .nut-loading__text{margin-left:var(--nutui-loading-text-margin, 8px)}.nut-loading .nut-loading-svg{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.nut-loading-hover{transition:stroke-dasharray .6s ease 0s,stroke .6s ease 0s}.nut-loading__normal{position:relative;width:24px;height:24px}.nut-loading__normal--block{display:block;position:absolute;top:0px;left:11px;width:2px;height:12px;transform-origin:50% bottom}.nut-loading__normal--block-inner{display:block;width:2px;height:6px;border-radius:1px}.nut-loading__point{position:relative;width:24px;height:24px}.nut-loading__point--block{display:block;position:absolute;top:0px;left:9px;width:6px;height:12px;transform-origin:50% bottom}.nut-loading__point--block-inner{display:block;width:6px;height:6px;border-radius:50%}.nut-loading__dot{position:relative;width:24px;height:24px}.nut-loading__dot--block{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.nut-loading__dot--block-inner{display:block;width:4px;height:4px;border-radius:50%}.nut-loading .loading-rotate{display:flex;width:100%;height:100%;animation:loading-rotate 1s infinite linear}.nut-loading--small .nut-loading__normal{display:flex;align-items:center;justify-content:center;width:16px;height:16px;transform:scale(.6666)}.nut-loading--small .nut-loading__normal .loading-rotate{position:absolute;top:-4px;left:-4px;width:24px;height:24px}.nut-loading--small .nut-loading__point{width:16px;height:16px}.nut-loading--small .nut-loading__point--block{left:6px;width:4px;height:8px}.nut-loading--small .nut-loading__point--block-inner{width:4px;height:4px}.nut-loading--small .nut-loading__dot{width:16px;height:16px}.nut-loading--small .nut-loading__dot--block-inner{width:2px;height:2px}.nut-loading--large .nut-loading__normal{display:flex;align-items:center;justify-content:center;width:32px;height:32px;transform:scale(1.33333)}.nut-loading--large .nut-loading__normal .loading-rotate{position:absolute;top:4px;left:4px;width:24px;height:24px}.nut-loading--large .nut-loading__point{width:32px;height:32px}.nut-loading--large .nut-loading__point--block{left:12px;width:8px;height:16px}.nut-loading--large .nut-loading__point--block-inner{width:8px;height:8px}.nut-loading--large .nut-loading__dot{width:32px;height:32px}.nut-loading--large .nut-loading__dot--block-inner{width:6px;height:6px}.nut-loading__text{font-size:var(--nutui-loading-text-size, var(--nsui-font-size-2, 12px));line-height:var(--nutui-loading-text-line-height, 20px);color:var(--nutui-loading-text-color, var(--nsui-gray-percent-color-7, rgba(0, 0, 0, .45)))}@keyframes loading-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}