Merge pull request #2947 from awesomerobot/master

updated loading spinner

app/assets/javascripts/discourse/helpers/loading-spinner.es6

@@ -1,4 +1,4 @@
-var spinnerHTML = "<div class='spinner-wrap'><div class='spinner'><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>";
+var spinnerHTML = "<div class='spinner'><div class='spinner-container container1'><div class='circle1'></div><div class='circle2'></div><div class='circle3'></div><div class='circle4'></div></div><div class='spinner-container container2'><div class='circle1'></div><div class='circle2'></div><div class='circle3'></div><div class='circle4'></div></div><div class='spinner-container container3'><div class='circle1'></div><div class='circle2'></div><div class='circle3'></div><div class='circle4'></div></div></div>";
 
 Handlebars.registerHelper('loading-spinner', function() {
     return new Handlebars.SafeString(spinnerHTML);

app/assets/javascripts/discourse/templates/discovery/topics.hbs

@@ -72,7 +72,7 @@
 
 <footer class='topic-list-bottom'>
   {{#if loadingMore}}
-    <div class='topics-loading'></div>
+    {{loading-spinner}}
   {{/if}}
   {{#if allLoaded}}
     {{#if showDismissRead}}

app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs

@@ -25,7 +25,7 @@
 
 <footer class='topic-list-bottom'>
   {{#if loadingMore}}
-    <div class='topics-loading'></div>
+    {{loading-spinner}}
   {{/if}}
   {{#if allLoaded}}
     {{#if showDismissRead}}

app/assets/javascripts/discourse/templates/search.hbs

@@ -8,7 +8,7 @@
   <a href="#" class="show-help" {{action "showSearchHelp" bubbles=false}}>{{i18n show_help}}</a>
 </div>
 {{#if loading}}
-  <div class='searching'></div>
+  <div class='searching'>{{loading-spinner}}</div>
 {{else}}
   <div class="results">
   {{#unless noResults}}

app/assets/stylesheets/common/base/_topic-list.scss

@@ -149,17 +149,6 @@
   }
 }
 
-.topics-loading {
-  width: 20px;
-  margin: 0 auto;
-  padding: 25px 15px;
-  background: {
-    image: image-url("spinner_96.gif");
-    repeat: no-repeat;
-    size: 50px;
-  };
-}
-
 .list-controls {
   .home {
     background-color: scale-color-diff();

app/assets/stylesheets/common/base/discourse.scss

@@ -147,46 +147,6 @@ body {
   }
 }
 
-.spinner {
-  height: 50px; width: 50px;
-  margin: 20px auto 0 auto;
-  -webkit-animation: spin 1s steps(12, end) infinite;
-  animation: spin 1s steps(12, end) infinite;
-}
-
-.spinner i {
-  height: 12px; width: 4px;
-  margin-left: -2px;
-  display: block;
-  position: absolute;
-  left: 50%;
-  transform-origin: center 25px;
-  background: $primary;
-  border-radius: 10px;
-}
-
-.spinner i:nth-child(1) { opacity: 0.08; }
-.spinner i:nth-child(2) { transform: rotate(30deg); opacity: 0.167; }
-.spinner i:nth-child(3) { transform: rotate(60deg); opacity: 0.25; }
-.spinner i:nth-child(4) { transform: rotate(90deg); opacity: 0.33; }
-.spinner i:nth-child(5) { transform: rotate(120deg); opacity: 0.4167; }
-.spinner i:nth-child(6) { transform: rotate(150deg); opacity: 0.5; }
-.spinner i:nth-child(7) { transform: rotate(180deg); opacity: 0.583; }
-.spinner i:nth-child(8) { transform: rotate(210deg); opacity: 0.67; }
-.spinner i:nth-child(9) { transform: rotate(240deg); opacity: 0.75; }
-.spinner i:nth-child(10) { transform: rotate(270deg); opacity: 0.833; }
-.spinner i:nth-child(11) { transform: rotate(300deg); opacity: 0.9167; }
-.spinner i:nth-child(12) { transform: rotate(330deg); opacity: 1; }
-
-@-webkit-keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
 
 .avatar-wrapper {
   background-color: $secondary;
@@ -215,3 +175,115 @@ body {
 .fade.in {
   opacity: 1;
 }
+
+.spinner {
+  margin: 20px auto 0 auto;
+  width: 35px;
+  height: 35px;
+  position: relative;
+
+  .container1 > div, .container2 > div, .container3 > div {
+    width: 6px;
+    height: 6px;
+    background-color: $primary;
+
+    border-radius: 100%;
+    position: absolute;
+    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
+    animation: bouncedelay 1.2s infinite ease-in-out;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  .spinner-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .container2 {
+    -webkit-transform: rotateZ(45deg);
+    transform: rotateZ(45deg);
+  }
+
+  .container3 {
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+  }
+
+  .circle1 { top: 0; left: 0; }
+  .circle2 { top: 0; right: 0; }
+  .circle3 { right: 0; bottom: 0; }
+  .circle4 { left: 0; bottom: 0; }
+
+  .container2 .circle1 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  .container3 .circle1 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+  }
+
+  .container1 .circle2 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+
+  .container2 .circle2 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  .container3 .circle2 {
+    -webkit-animation-delay: -0.7s;
+    animation-delay: -0.7s;
+  }
+
+  .container1 .circle3 {
+    -webkit-animation-delay: -0.6s;
+    animation-delay: -0.6s;
+  }
+
+  .container2 .circle3 {
+    -webkit-animation-delay: -0.5s;
+    animation-delay: -0.5s;
+  }
+
+  .container3 .circle3 {
+    -webkit-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+  }
+
+  .container1 .circle4 {
+    -webkit-animation-delay: -0.3s;
+    animation-delay: -0.3s;
+  }
+
+  .container2 .circle4 {
+    -webkit-animation-delay: -0.2s;
+    animation-delay: -0.2s;
+  }
+
+  .container3 .circle4 {
+    -webkit-animation-delay: -0.1s;
+    animation-delay: -0.1s;
+  }
+
+}
+
+@-webkit-keyframes bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0.0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes bouncedelay {
+  0%, 80%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 40% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}

app/assets/stylesheets/common/base/header.scss

@@ -270,18 +270,17 @@
   }
 
   .searching {
-    display: block;
     position: absolute;
-    top: 17px;
+    top: 0;
-    right: 15px;
+    right: 0;
-    width: 22px;
+    .spinner {
-    height: 22px;
+      width: 16px;
-    background: {
+      height: 16px;
-      image: image-url("spinner_96.gif");
+      }
-      repeat: no-repeat;
+    .container1 > div, .container2 > div, .container3 > div {
-      position: 0px 50%;
+      width: 4px;
-      size: 18px;
+      height: 4px;
-    };
+      }
   }
   // I am ghetto using this to display "Show More".. be warned
   .no-results {
@@ -366,5 +365,3 @@
 #search-help table td {
   padding-right: 10px;
 }
-
-

app/assets/stylesheets/mobile/header.scss

@@ -50,6 +50,12 @@
 
   // Search
 
+  .searching {
+    position: absolute;
+    top: 0;
+    right: 25px;
+  }
+  
   input[type='text'] {
     width: 265px;
     font-size: 16px;
@@ -77,4 +83,4 @@
 
 .d-dropdown#search-dropdown .heading {
   padding: 0;
-}
+}