171 lines
3.9 KiB
SCSS
171 lines
3.9 KiB
SCSS
// Loader styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Loader/principal
|
|
|
|
This is the generic loader for widgets, maps, components, ...
|
|
|
|
```
|
|
<div class="CDB-Loader is-visible"></div>
|
|
|
|
```
|
|
*/
|
|
|
|
.CDB-Loader {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 3px;
|
|
transform: translateX(-200%);
|
|
background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.CDB-Loader.is-visible {
|
|
@include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
|
|
}
|
|
|
|
@include keyframes(loader-progress) {
|
|
from {
|
|
transform: translateX(-200%);
|
|
}
|
|
to {
|
|
transform: translateX(200%);
|
|
}
|
|
}
|
|
|
|
/* SG
|
|
# Loader/circle
|
|
|
|
```
|
|
<div style="padding: 20px;">
|
|
<div class="CDB-LoaderIcon is-blue">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="CDB-LoaderIcon is-dark">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 20px; background: #F9F9F9;">
|
|
<div class="CDB-LoaderIcon is-dark">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 20px; background: #2E3C43;">
|
|
<div class="CDB-LoaderIcon">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 20px; background: #E27D61;">
|
|
<div class="CDB-LoaderIcon">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
|
|
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
|
|
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
```
|
|
*/
|
|
.CDB-LoaderIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.CDB-LoaderIcon-spinner {
|
|
animation: rotate 2s linear infinite;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.CDB-LoaderIcon--small,
|
|
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.CDB-LoaderIcon--big,
|
|
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.CDB-LoaderIcon-path {
|
|
stroke: rgba(255, 255, 255, 0.88);
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: 0;
|
|
animation: dash 1.5s ease-in-out infinite;
|
|
stroke-width: 4px;
|
|
}
|
|
|
|
.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
|
|
stroke: rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
|
|
stroke: $cBlue;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% {
|
|
stroke-dasharray: 1, 150;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -35;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -124;
|
|
}
|
|
}
|