@dialpad/dialtone-css
Version:
Dialpad's design system
40 lines (36 loc) • 975 B
text/less
//
// DIALTONE
// COMPONENTS: LOADER
//
// These are loader classes for Dialpad's design system Dialtone.
// For further documentation of these and other classes,
// visit https://dialtone.dialpad.com/components/loader
//
// TABLE OF CONTENTS
// • DEFAULT LOADER
//
// ============================================================================
// $ DEFAULT LOADER
// ----------------------------------------------------------------------------
.d-loader {
display: inline-grid;
&__icon {
grid-area: 1 / 1;
opacity: var(--dt-opacity-1000);
animation: d-loading-circle 900ms infinite linear;
// Comet fade. Black is an intentional choice and only used for masking.
mask-image: conic-gradient(
from 270deg,
black 0deg,
black 105deg,
transparent 170deg,
transparent 180deg,
black 234deg,
black 360deg
);
}
&__icon-track {
grid-area: 1 / 1;
opacity: var(--dt-opacity-200);
}
}