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

Merge pull request #106 from CartoDB/fix-loader

Browse Source 
fix loader
This commit is contained in:
piensaenpixel 2016-05-04 15:22:42 +02:00
commit b0ac3dfc85
1 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/scss/cdb-components/loader.scss
View File

@ -47,15 +47,31 @@ This is the generic loader for widgets, maps, components, ...
``` ```
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-LoaderIcon"> <div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"></div> <div class="CDB-LoaderIcon-item">
<span class="CDB-LoaderIcon-itemClose"></span>
<span class="CDB-LoaderIcon-itemCircle"></span>
</div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-grey"> <div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item is-grey"></div> <div class="CDB-LoaderIcon-item">
<span class="CDB-LoaderIcon-itemClose"></span>
<span class="CDB-LoaderIcon-itemCircle"></span>
</div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #E27D61;">
<div class="CDB-LoaderIcon is-bg">
<div class="CDB-LoaderIcon-item">
<span class="CDB-LoaderIcon-itemClose" style="background: #E27D61"></span>
<span class="CDB-LoaderIcon-itemCircle" style="background: #E27D61"></span>
</div>
</div>
</div>
``` ```
*/ */
@ -66,6 +82,9 @@ This is the generic loader for widgets, maps, components, ...
height: $baseSize * 2; height: $baseSize * 2;
border: 2px solid $cMainLine; border: 2px solid $cMainLine;
border-radius: 50%; border-radius: 50%;
&.is-bg {
border: 2px solid rgba($cWhite, 0.9);
}
&.is-grey { &.is-grey {
border: 2px solid $cSecondaryText; border: 2px solid $cSecondaryText;
} }
@ -79,42 +98,45 @@ This is the generic loader for widgets, maps, components, ...
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%); background: linear-gradient(to right, rgba($cWhite, 0.1) 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 { &.is-grey {
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
&::before {
background: $cSecondaryText;
}
&::after {
background: $cMainBg;
}
} }
} }
.CDB-LoaderIcon-itemCircle {
display: inline-block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 75%;
height: 75%;
margin: auto;
border-radius: 50%;
}
.CDB-LoaderIcon-itemClose {
position: absolute;
top: -2px;
left: 0;
width: 50%;
height: 50%;
border-radius: 100% 0 0;
}
.CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon-itemClose {
background: $cWhite;
}
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
background: $cMainBg;
}
@include keyframes(loader-icon) { @include keyframes(loader-icon) {
0% { 0% {