arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-01-26 18:02:18 +00:00
Code Issues Projects Releases Wiki Activity

Add loading animation to recent changes feed.

Browse Source 
This is quite a quick spinner, not sure it really fits with the themeing,
but worth experimenting with anyway.
This commit is contained in:
Tom Price
2015-05-26 01:09:19 +01:00
parent 314111d6bd
commit 8714d4d24c
3 changed files with 73 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
RIGS/static/scss/screen.scss
View File

@@ -7,6 +7,9 @@
@import "jq-ui-bootstrap/_menu";
@import "jq-ui-bootstrap/_tooltip";
@import "compass/css3/animation";
@import "compass/css3/transform";
body, .pad-top {
padding-top: 50px;
}
@@ -71,3 +74,66 @@ textarea {
background-color: $panel-default-heading-bg;
}
}
.loading-animation {
position: relative;
margin: 30px auto 0;
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
@include animation(spinPulse 1s infinite ease-in-out);
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -40px;
@include animation(spinoffPulse 1s infinite linear);
}
@include keyframes(spinPulse) {
0% {
@include rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
@include rotate(145deg);
opacity: 1;
}
100% {
@include rotate(-320deg);
opacity: 0;
};
}
@include keyframes(spinoffPulse) {
0% {
@include rotate(0deg);
}
100% {
@include rotate(360deg);
};
}
}