@kelvininc/ui-components
Version:
Kelvin UI Components
68 lines (66 loc) • 1.56 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
:host {
/**
* @prop --loader-overlay-color: Overlay color
* @prop --loader-overlay-opacity: Overlay opacity
* @prop --loader-background-color: Loader background
* @prop --loader-spinner-color: Loader color
* @prop --loader-z-index: Loader z-index position.
*/
--loader-overlay-color: var(--kv-neutral-4, #bebebe);
--loader-overlay-opacity: 0.4;
--loader-background-color: var(--kv-neutral-2, #e5e5e5);
--loader-spinner-color: var(--kv-secondary-5, #8358fe);
--loader-padding: 15px;
--loader-border-size: 6px;
--loader-z-index: 1;
}
.loader-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: var(--loader-z-index);
}
.loader-container .overlay {
width: 100%;
height: 100%;
opacity: var(--loader-overlay-opacity);
background-color: var(--loader-overlay-color);
}
.loader-container .loader {
height: 0;
width: 0;
padding: var(--loader-padding);
border: var(--loader-border-size) solid var(--loader-background-color);
border-right-color: var(--loader-spinner-color);
border-radius: 50%;
animation: loadrotate 1s infinite linear;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
@keyframes loadrotate {
/* Use 0% instead for anticlockwise */
100% {
transform: rotate(360deg);
}
}