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

Merge pull request #129 from CartoDB/loader-sizes

Browse Source 
add new size
This commit is contained in:
piensaenpixel 2016-06-10 11:11:08 +02:00 committed by GitHub
commit 1c3ccc1e9e
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,11 @@ This is the generic loader for widgets, maps, components, ...
<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;">
@ -60,6 +65,11 @@ This is the generic loader for widgets, maps, components, ...
<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;">
@ -68,6 +78,11 @@ This is the generic loader for widgets, maps, components, ...
<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;">
@ -76,6 +91,11 @@ This is the generic loader for widgets, maps, components, ...
<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>
```
@ -83,15 +103,26 @@ This is the generic loader for widgets, maps, components, ...
.CDB-LoaderIcon-spinner {
animation: rotate 2s linear infinite;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
}
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
width: 40px;
height: 40px;
}
.CDB-LoaderIcon-path {
stroke: rgba(255, 255, 255, 0.48);
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);
}