cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Renaming all files to _whatever in order to avoid be compiled in other projects, only the entry one, thanks to @nobuti

Browse Source
This commit is contained in:
Javier Álvarez Medina
2017-05-24 12:50:42 +02:00
parent 007b851962
commit a41763c4f2
46 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/_loader.scss
+162
View File
@@ -0,0 +1,162 @@
// 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-spinner {
width: 40px;
height: 40px;
}
.CDB-LoaderIcon-path {
stroke: rgba(255, 255, 255, 0.88);
stroke-linecap: round;
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 {
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;
}
}