@fesjs/fes-design
Version:
fes-design for PC
54 lines (53 loc) • 1.1 kB
CSS
.fes-skeleton {
width: 100%;
height: 1em;
background-color: var(--f-border-color-split);
border-radius: 0;
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
animation: none;
}
.fes-skeleton.is-text {
display: inline-block;
height: 1em;
}
.fes-skeleton.is-sharp {
border-radius: var(--f-border-radius-base);
}
.fes-skeleton.is-round {
border-radius: 4096px;
}
.fes-skeleton.is-size-small {
height: 24px;
}
.fes-skeleton.is-size-middle {
height: 32px;
}
.fes-skeleton.is-size-large {
height: 40px;
}
.fes-skeleton.is-circle {
border-radius: 50%;
}
.fes-skeleton.is-circle.is-size-small {
width: 24px;
}
.fes-skeleton.is-circle.is-size-middle {
width: 32px;
}
.fes-skeleton.is-circle.is-size-large {
width: 40px;
}
.fes-skeleton.is-animated {
animation: 2s skeleton-loading infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes skeleton-loading {
0% {
background-color: var(--f-border-color-split);
}
60% {
background-color: var(--f-border-color-disabled);
}
100% {
background-color: var(--f-border-color-split);
}
}