Ditch custom loading in favour of BS4 inbuilt

It's less pretty/cool...I may bring it back in future but this'll do for now.
This commit is contained in:
2020-03-18 01:46:13 +00:00
parent 12d8b46f86
commit e42989637e
4 changed files with 7 additions and 125 deletions

File diff suppressed because one or more lines are too long

View File

@@ -78,69 +78,6 @@ ins {
color: $gray-400 !important;
}
.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 animated(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 animated(spinoffPulse 1s infinite linear);
}
/*@include animate-keyframe(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 animate-keyframe(spinoffPulse) {
0% {
@include rotate(0deg);
}
100% {
@include rotate(360deg);
};
}*/
}
html.embedded {
display: flex;
flex-direction: column;

View File

@@ -38,9 +38,10 @@
<h4>Recent Changes</h4>
</div>
<div class="list-group list-group-flush">
<div id="activity_loading" class="list-group-item loading-animation">
<div class="circle"></div>
<div class="circle1"></div>
<div id="activity_loading" class="list-group-item text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div id="activity">
</div>

View File

@@ -13,9 +13,8 @@
<h2>Please wait</h2>
</div>
<div class="modal-body">
<div class="loading-animation">
<div class="circle"></div>
<div class="circle1"></div>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>