mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-27 17:46:05 -05:00
updated loading spinner
This commit is contained in:
Kris Aubuchon
parent
a5616146eb
commit
a0e5605869
8 changed files with 133 additions and 69 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<footer class='topic-list-bottom'>
|
||||
{{#if loadingMore}}
|
||||
<div class='topics-loading'></div>
|
||||
{{loading-spinner}}
|
||||
{{/if}}
|
||||
{{#if allLoaded}}
|
||||
{{#if showDismissRead}}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<footer class='topic-list-bottom'>
|
||||
{{#if loadingMore}}
|
||||
<div class='topics-loading'></div>
|
||||
{{loading-spinner}}
|
||||
{{/if}}
|
||||
{{#if allLoaded}}
|
||||
{{#if showDismissRead}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -270,18 +270,17 @@
|
|||
}
|
||||
|
||||
.searching {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 15px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: {
|
||||
image: image-url("spinner_96.gif");
|
||||
repeat: no-repeat;
|
||||
position: 0px 50%;
|
||||
size: 18px;
|
||||
};
|
||||
top: 0;
|
||||
right: 0;
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.container1 > div, .container2 > div, .container3 > div {
|
||||
width: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue