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

unify spinners

Browse Source
This commit is contained in:
piensaenpixel 2016-06-07 13:47:32 +02:00
parent 9ef35729de
commit bf6a54d6b1
1 changed files with 45 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ This is the generic loader for widgets, maps, components, ...
``` ```
<div class="CDB-Loader is-visible"></div> <div class="CDB-Loader is-visible"></div>
``` ```
*/ */
@ -46,117 +47,73 @@ 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 is-dark">
<div class="CDB-LoaderIcon-item"> <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<span class="CDB-LoaderIcon-itemClose"></span> <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
<span class="CDB-LoaderIcon-itemCircle"></span> </svg>
</div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #F9F9F9;"> <div style="padding: 20px; background: #F9F9F9;">
<div class="CDB-LoaderIcon is-grey"> <div class="CDB-LoaderIcon is-dark">
<div class="CDB-LoaderIcon-item"> <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<span class="CDB-LoaderIcon-itemClose"></span> <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
<span class="CDB-LoaderIcon-itemCircle"></span> </svg>
</div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-dark"> <div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"> <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<span class="CDB-LoaderIcon-itemClose"></span> <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
<span class="CDB-LoaderIcon-itemCircle"></span> </svg>
</div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #E27D61;"> <div style="padding: 20px; background: #E27D61;">
<div class="CDB-LoaderIcon is-bg"> <div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"> <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<span class="CDB-LoaderIcon-itemClose" style="background: #E27D61"></span> <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
<span class="CDB-LoaderIcon-itemCircle" style="background: #E27D61"></span> </svg>
</div>
</div> </div>
</div> </div>
``` ```
*/ */
.CDB-LoaderIcon { .CDB-LoaderIcon-spinner {
box-sizing: border-box; animation: rotate 2s linear infinite;
position: relative; width: 20px;
width: $baseSize * 2; height: 20px;
height: $baseSize * 2; }
border: 2px solid $cMainLine; .CDB-LoaderIcon-path {
border-radius: 50%; stroke: rgba(255, 255, 255, 0.48);
&.is-bg { stroke-linecap: round;
border: 2px solid rgba($cWhite, 0.9); animation: dash 1.5s ease-in-out infinite;
} stroke-width: 4px;
&.is-dark { }
border: 2px solid $cSecondaryText; .CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
} stroke: rgba(0, 0, 0, 0.24);
} }
.CDB-LoaderIcon-item { @keyframes rotate {
@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, rgba($cWhite, 0.1) 10%, rgba($cWhite, 0) 42%);
&.is-dark {
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
}
}
.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-dark .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-itemClose {
background: $cMainBg;
}
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
background: $cThirdBackground;
}
@include keyframes(loader-icon) {
0% {
transform: rotate(0deg);
}
100% { 100% {
transform: rotate(360deg); 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;
}
}