129 lines
2.3 KiB
SCSS
129 lines
2.3 KiB
SCSS
// Loader styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Loader/principal
|
|
|
|
This is the generic loader for widgets, maps, components, ...
|
|
|
|
```
|
|
<div class="CDB-Loader is-visible"></div>
|
|
```
|
|
*/
|
|
|
|
@import '../cdb-utilities/mixins';
|
|
@import '../cdb-variables/colors';
|
|
@import '../cdb-variables/sizes';
|
|
|
|
.CDB-Loader {
|
|
@include css3-prefix(animation, loader-progress 1000ms linear 1);
|
|
@include opacity(0);
|
|
@include transition(opacity, 1000ms);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: rgba(#3AA9E3, 1);
|
|
z-index: 10;
|
|
}
|
|
.CDB-Loader.is-visible {
|
|
@include css3-prefix(animation, loader-progress 2000ms linear infinite);
|
|
@include opacity(1);
|
|
}
|
|
|
|
@include keyframes(loader-progress) {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* SG
|
|
# Loader/circle
|
|
|
|
```
|
|
<div style="padding: 20px;">
|
|
<div class="CDB-LoaderIcon">
|
|
<div class="CDB-LoaderIcon-item"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 20px; background: #2E3C43;">
|
|
<div class="CDB-LoaderIcon is-grey">
|
|
<div class="CDB-LoaderIcon-item is-grey"></div>
|
|
</div>
|
|
</div>
|
|
```
|
|
*/
|
|
|
|
.CDB-LoaderIcon {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: $baseSize * 2;
|
|
height: $baseSize * 2;
|
|
border: 2px solid $cMainLine;
|
|
border-radius: 50%;
|
|
&.is-grey {
|
|
border: 2px solid $cSecondaryText;
|
|
}
|
|
}
|
|
|
|
.CDB-LoaderIcon-item {
|
|
@include css3-prefix(animation, loader-icon 1.4s linear infinite);
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
width: $baseSize * 2;
|
|
height: $baseSize * 2;
|
|
border-radius: 50%;
|
|
background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
content: '';
|
|
}
|
|
|
|
&::before {
|
|
width: 50%;
|
|
height: 50%;
|
|
border-radius: 100% 0 0;
|
|
background: $cMainLine;
|
|
}
|
|
&::after {
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 75%;
|
|
height: 75%;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
background: $cWhite;
|
|
}
|
|
&.is-grey {
|
|
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
|
|
&::before {
|
|
background: $cSecondaryText;
|
|
}
|
|
&::after {
|
|
background: $cMainBg;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@include keyframes(loader-icon) {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|