diff --git a/app/assets/javascripts/discourse/helpers/loading-spinner.es6 b/app/assets/javascripts/discourse/helpers/loading-spinner.es6
index c7ce1c9346d..f82e97a6ecb 100644
--- a/app/assets/javascripts/discourse/helpers/loading-spinner.es6
+++ b/app/assets/javascripts/discourse/helpers/loading-spinner.es6
@@ -1,4 +1,4 @@
-var spinnerHTML = "
";
+var spinnerHTML = "";
Handlebars.registerHelper('loading-spinner', function() {
return new Handlebars.SafeString(spinnerHTML);
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 93a1b716aa5..f5084768b31 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -176,114 +176,33 @@ body {
opacity: 1;
}
+
+@-webkit-keyframes rotate-forever {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@keyframes rotate-forever {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
.spinner {
- margin: 20px auto 0 auto;
- width: 35px;
- height: 35px;
+ margin: 30px auto 0 auto;
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);
- }
+ -webkit-animation: rotate-forever 1s infinite linear;
+ animation: rotate-forever 1s infinite linear;
+ height: 30px;
+ width: 30px;
+ border: 4px solid dark-light-diff($primary, $secondary, 50%, -50%);
+ border-right-color: transparent;
+ border-radius: 50%;
}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 49f956e6ed2..c6422150d21 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -274,12 +274,10 @@
top: 0;
right: 0;
.spinner {
- width: 16px;
- height: 16px;
- }
- .container1 > div, .container2 > div, .container3 > div {
- width: 4px;
- height: 4px;
+ width: 10px;
+ height: 10px;
+ border-width: 2px;
+ margin: 20px 0 0 0;
}
}
// I am ghetto using this to display "Show More".. be warned