From 810075cf64238031e0f091b31552ffe0bf0d8c63 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Fri, 10 Jun 2016 10:52:32 +0200
Subject: [PATCH] add new size

---
 src/scss/cdb-components/loader.scss | 35 +++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss
index 58b4bf9..67b2df1 100644
--- a/src/scss/cdb-components/loader.scss
+++ b/src/scss/cdb-components/loader.scss
@@ -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);
 }