element-plus/lib/theme-chalk/el-skeleton.css

A Component Library for Vue3.0

:root{--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-ease-in-out-bezier-function:cubic-bezier(0.645, 0.045, 0.355, 1);--el-fast-bezier-transition:cubic-bezier(0.23, 1, 0.32, 1);--el-all-transition:all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);--el-fade-transition:opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-md-fade-transition:transform var(--el-transition-duration) var(--el-fast-bezier-transition),opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-fade-linear-transition:opacity var(--el-transition-duration-fast) linear;--el-border-transition-base:border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-color-transition-base:color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-skeleton-avatar-small-size:var(--el-avatar-small-size);--el-skeleton-avatar-medium-size:var(--el-avatar-medium-size);--el-skeleton-avatar-large-size:var(--el-avatar-large-size);--el-skeleton-color:#f2f2f2;--el-skeleton-to-color:#e6e6e6}.el-skeleton__item{background:var(--el-skeleton-color);display:inline-block;height:16px;border-radius:var(--el-border-radius-base);width:100%}.el-skeleton__circle{border-radius:50%;width:var(--el-skeleton-avatar-medium-size);height:var(--el-skeleton-avatar-medium-size);line-height:var(--el-skeleton-avatar-medium-size)}.el-skeleton__circle--lg{width:var(--el-skeleton-avatar-large-size);height:var(--el-skeleton-avatar-large-size);line-height:var(--el-skeleton-avatar-large-size)}.el-skeleton__circle--md{width:var(--el-skeleton-avatar-small-size);height:var(--el-skeleton-avatar-small-size);line-height:var(--el-skeleton-avatar-small-size)}.el-skeleton__button{height:40px;width:64px;border-radius:4px}.el-skeleton__p{width:100%}.el-skeleton__p.is-last{width:61%}.el-skeleton__p.is-first{width:33%}.el-skeleton__text{width:100%;height:var(--el-font-size-small)}.el-skeleton__caption{height:var(--el-font-size-extra-small)}.el-skeleton__h1{height:var(--el-font-size-extra-large)}.el-skeleton__h3{height:var(--el-font-size-large)}.el-skeleton__h5{height:var(--el-font-size-medium)}.el-skeleton__image{width:unset;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:0}.el-skeleton__image svg{fill:var(--el-svg-monochrome-grey);width:22%;height:22%}@-webkit-keyframes el-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes el-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}.el-skeleton{width:100%}.el-skeleton__first-line,.el-skeleton__paragraph{height:16px;margin-top:16px;background:var(--el-skeleton-color)}.el-skeleton.is-animated .el-skeleton__item{background:-webkit-gradient(linear,left top,right top,color-stop(25%,var(--el-skeleton-color)),color-stop(37%,var(--el-skeleton-to-color)),color-stop(63%,var(--el-skeleton-color)));background:linear-gradient(90deg,var(--el-skeleton-color) 25%,var(--el-skeleton-to-color) 37%,var(--el-skeleton-color) 63%);background-size:400% 100%;-webkit-animation:el-skeleton-loading 1.4s ease infinite;animation:el-skeleton-loading 1.4s ease infinite}