@vue-interface/activity-indicator
Version:
An Vue activity indicator component.
55 lines (46 loc) • 1.93 kB
CSS
@theme {
--activity-indicator-facebook-height: 4em;
--activity-indicator-facebook-child-bg: #333;
--activity-indicator-facebook-child-height: 100%;
--activity-indicator-facebook-child-width: 6px;
--activity-indicator-facebook-child-margin-right: 2px;
--activity-indicator-facebook-child-display: inline-block;
--activity-indicator-facebook-child-animation: activity-indicator-facebook 1.2s infinite ease-in-out;
--activity-indicator-facebook-rect2-delay: -1.1s;
--activity-indicator-facebook-rect3-delay: -1.0s;
--activity-indicator-facebook-rect4-delay: -0.9s;
--activity-indicator-facebook-rect5-delay: -0.8s;
--activity-indicator-facebook-scale-start: scaleY(0.4);
--activity-indicator-facebook-scale-peak: scaleY(1.0);
}
@utility activity-indicator-facebook {
height: var(--activity-indicator-facebook-height);
& > div {
background-color: var(--activity-indicator-facebook-child-bg);
height: var(--activity-indicator-facebook-child-height);
width: var(--activity-indicator-facebook-child-width);
margin-right: var(--activity-indicator-facebook-child-margin-right);
display: var(--activity-indicator-facebook-child-display);
animation: var(--activity-indicator-facebook-child-animation);
}
& .activity-indicator-facebook-rect2 {
animation-delay: var(--activity-indicator-facebook-rect2-delay);
}
& .activity-indicator-facebook-rect3 {
animation-delay: var(--activity-indicator-facebook-rect3-delay);
}
& .activity-indicator-facebook-rect4 {
animation-delay: var(--activity-indicator-facebook-rect4-delay);
}
& .activity-indicator-facebook-rect5 {
animation-delay: var(--activity-indicator-facebook-rect5-delay);
}
}
@keyframes activity-indicator-facebook {
0%, 40%, 100% {
transform: var(--activity-indicator-facebook-scale-start);
}
20% {
transform: var(--activity-indicator-facebook-scale-peak);
}
}