vue-devui/skeleton/style.css

DevUI components based on Vite and Vue3

.devui-skeleton-item{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-skeleton-item--round{border-radius:var(--devui-border-radius, 2px)}.devui-skeleton-item--square{width:100%;height:16px}.devui-skeleton-item--circle{border-radius:50%}.devui-skeleton-item--circle.devui-skeleton-item--sm{width:20px;height:20px}.devui-skeleton-item--circle.devui-skeleton-item--md{width:40px;height:40px}.devui-skeleton-item--circle.devui-skeleton-item--lg{width:60px;height:60px}.devui-skeleton-item--image{display:flex;justify-content:center;align-items:center}.devui-skeleton-item--image svg{width:40%;height:40%}.devui-skeleton-item--image.devui-skeleton-item--sm{width:50px;height:50px}.devui-skeleton-item--image.devui-skeleton-item--md{width:100px;height:100px}.devui-skeleton-item--image.devui-skeleton-item--lg{width:200px;height:200px}.devui-skeleton-item--animation.devui-skeleton-item{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--devui-list-item-hover-bg, #f2f2f3);background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton{width:100%}.devui-skeleton__paragraph{margin-bottom:12px}.devui-skeleton__paragraph:last-child{width:60%;margin-bottom:0}.devui-skeleton-item.devui-skeleton__title{width:40%;margin-bottom:16px}