Resize loaders

WidgetA · Apr 27, 2019 · 0264275 · 0264275
1 parent 26cd566
commit 0264275
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 24 deletions.
diff --git a/effects/loader-multi-ring.vue b/effects/loader-multi-ring.vue
@@ -24,26 +24,26 @@
 }
 
 .outer {
-  width: 4em;
-  height: 4em;
-  margin-left: -2em;
-  margin-top: -2em;
+  width: 3.5em;
+  height: 3.5em;
+  margin-left: -1.75em;
+  margin-top: -1.75em;
   animation: spin 2s linear infinite;
 }
 
 .middle {
-  width: 2.6em;
-  height: 2.6em;
-  margin-left: -1.3em;
-  margin-top: -1.3em;
+  width: 2.1em;
+  height: 2.1em;
+  margin-left: -1.05em;
+  margin-top: -1.05em;
   animation: spin 1.75s linear reverse infinite;
 }
 
 .inner {
-  width: 1.3em;
-  height: 1.3em;
-  margin-left: -0.65em;
-  margin-top: -0.65em;
+  width: 0.8em;
+  height: 0.8em;
+  margin-left: -0.4em;
+  margin-top: -0.4em;
   animation: spin 1.5s linear infinite;
 }
 

diff --git a/effects/loader-orbit.vue b/effects/loader-orbit.vue
@@ -5,8 +5,8 @@
 <style scoped>
 div {
   display: flex;
-  width: 4em;
-  height: 4em;
+  width: 3.5em;
+  height: 3.5em;
   border: 3px solid transparent;
   border-top-color: #3cefff;
   border-bottom-color: #3cefff;
@@ -18,8 +18,8 @@ div:before {
   content: '';
   display: block;
   margin: auto;
-  width: 1.25em;
-  height: 1.25em;
+  width: 0.75em;
+  height: 0.75em;
   border: 3px solid #3cefff;
   border-radius: 50%;
   animation: pulse 1s alternate ease-in-out infinite;

diff --git a/effects/loader-orbit2.vue b/effects/loader-orbit2.vue
@@ -7,7 +7,7 @@
 
 <style scoped>
 svg {
-  width: 4.5em;
+  width: 3.75em;
   animation: 1.5s spin ease infinite;
 }
 

diff --git a/effects/loader-ring.vue b/effects/loader-ring.vue
@@ -6,7 +6,7 @@
 
 <style scoped>
 svg {
-  width: 4.5em;
+  width: 3.75em;
   transform-origin: center;
   animation: rotate 2s linear infinite;
 }

diff --git a/effects/loader-ring2.vue b/effects/loader-ring2.vue
@@ -7,8 +7,8 @@ div {
   border: 3px solid hsla(185, 100%, 62%, 0.2);
   border-top-color: #3cefff;
   border-radius: 50%;
-  width: 4em;
-  height: 4em;
+  width: 3em;
+  height: 3em;
   animation: spin 1s linear infinite;
 }
 

diff --git a/effects/loader-wave.vue b/effects/loader-wave.vue
@@ -8,7 +8,7 @@
 
 <style scoped>
 .balls {
-  width: 4em;
+  width: 3.5em;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -20,7 +20,7 @@
   height: 0.8em;
   border-radius: 50%;
   background-color: #fc2f70;
-  transform: translateY(-125%);
+  transform: translateY(-100%);
   animation: wave 0.8s ease-in-out alternate infinite;
 }
 
@@ -34,10 +34,10 @@
 
 @keyframes wave {
   from {
-    transform: translateY(-125%);
+    transform: translateY(-100%);
   }
   to {
-    transform: translateY(125%);
+    transform: translateY(100%);
   }
 }
 </style>