@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 1.54 kB
CSS
.nut-skeleton{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;width:100%}.nut-skeleton-content{display:flex}.nut-skeleton-content .nut-avatar{margin-right:20px;background:var(--nutui-skeleton-background, #f8f8f8)}.nut-skeleton-content .nut-skeleton-block{width:var(--nutui-skeleton-line-width, 100%);height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, #f8f8f8);margin-top:10px;border-radius:var(--nutui-skeleton-line-border-radius, 0)}.nut-skeleton-content-line{width:100%;display:flex;flex-direction:column}.nut-skeleton-content-line .nut-skeleton-title{width:30%;height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, #f8f8f8)}.nut-skeleton-content-line .nut-skeleton-block:last-child{width:70%}.nut-skeleton-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,#fff0,#ffffff80 50%,#fff0 80%);animation:nut-skeleton 2s ease-in-out 0s infinite}@keyframes nut-skeleton{0%{background-position-x:-500px}to{background-position-x:calc(500px + 100%)}}[dir=rtl] .nut-skeleton-content .nut-avatar,.nut-rtl .nut-skeleton-content .nut-avatar{margin-right:0;margin-left:20px}[dir=rtl] .nut-skeleton-animation,.nut-rtl .nut-skeleton-animation{left:auto;right:0;background:linear-gradient(-90deg,#fff0,#ffffff80 50%,#fff0 80%);animation:nut-skeleton-rtl 2s ease-in-out 0s infinite}@keyframes nut-skeleton-rtl{0%{background-position-x:calc(500px + 100%)}to{background-position-x:-500px}}