UNPKG

@bee-design/ui

Version:

Bee Design React UI Library.

1 lines 1.39 kB
.bee-skeleton{display:flex}.bee-skeleton-header{display:flex}.bee-skeleton-header .bee-skeleton-image{background-color:var(--bee-color-fill-2);width:48px;height:48px;border-radius:var(--bee-border-radius-small)}.bee-skeleton-header .bee-skeleton-image-circle{border-radius:50%}.bee-skeleton-header .bee-skeleton-image-small{width:36px;height:36px}.bee-skeleton-header .bee-skeleton-image-large{width:60px;height:60px}.bee-skeleton-header .bee-skeleton-image-left{margin-right:16px}.bee-skeleton-header .bee-skeleton-image-right{margin-left:16px}.bee-skeleton-content{flex-grow:1;overflow:hidden}.bee-skeleton-content .bee-skeleton-text{list-style:none;padding:0;margin:0}.bee-skeleton-content .bee-skeleton-text-row{background-color:var(--bee-color-fill-2);height:16px}.bee-skeleton-content .bee-skeleton-text-row:not(:last-child){margin-bottom:16px}.bee-skeleton-animate .bee-skeleton-image,.bee-skeleton-animate .bee-skeleton-text>li{background:linear-gradient(90deg,var(--bee-color-fill-2) 25%,var(--bee-color-fill-3) 37%,var(--bee-color-fill-2) 63%);background-size:400% 100%;animation:bee-skeleton-circle 1.5s cubic-bezier(0,0,1,1) infinite}@keyframes bee-skeleton-circle{0%{background-position:100% 50%}100%{background-position:0 50%}}.bee-skeleton-rtl .bee-skeleton-image-left{margin-right:0;margin-left:16px}.bee-skeleton-rtl .bee-skeleton-image-right{margin-left:0;margin-right:16px}