Skip to content

Commit 3522431

Browse files
kimchouardkimchouard
committed
Loading animation
1 parent 7848cea commit 3522431

File tree

3 files changed

+191
-3
lines changed

3 files changed

+191
-3
lines changed

‎stylesheets/app.css‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7759,10 +7759,143 @@ form.custom .custom.dropdown.open.medium ul {
77597759
}
77607760

77617761
/* For reseting magellan on top :) */
7762-
/* line 599, sass/app.scss */
7762+
/* line 598, sass/app.scss */
77637763
.featured {
77647764
position: absolute;
77657765
top: 0;
77667766
margin-top: -250px;
77677767
display: block;
77687768
}
7769+
7770+
/* line 608, sass/app.scss */
7771+
.loading {
7772+
width: 100px;
7773+
height: 50px;
7774+
margin: 20px auto;
7775+
}
7776+
/* line 614, sass/app.scss */
7777+
.loading .bars div {
7778+
height: 40px;
7779+
width: 3px;
7780+
background: red;
7781+
display: inline-block;
7782+
-webkit-animation: loader 1.3s infinite;
7783+
-moz-animation: loader 1.3s infinite;
7784+
-o-animation: loader 1.3s infinite;
7785+
animation: loader 1.3s infinite;
7786+
}
7787+
/* line 622, sass/app.scss */
7788+
.loading .bars div:nth-child(1) {
7789+
-webkit-animation-delay: 0.1s;
7790+
-moz-animation-delay: 0.1s;
7791+
-o-animation-delay: 0.1s;
7792+
animation-delay: 0.1s;
7793+
}
7794+
/* line 622, sass/app.scss */
7795+
.loading .bars div:nth-child(2) {
7796+
-webkit-animation-delay: 0.2s;
7797+
-moz-animation-delay: 0.2s;
7798+
-o-animation-delay: 0.2s;
7799+
animation-delay: 0.2s;
7800+
}
7801+
/* line 622, sass/app.scss */
7802+
.loading .bars div:nth-child(3) {
7803+
-webkit-animation-delay: 0.3s;
7804+
-moz-animation-delay: 0.3s;
7805+
-o-animation-delay: 0.3s;
7806+
animation-delay: 0.3s;
7807+
}
7808+
/* line 622, sass/app.scss */
7809+
.loading .bars div:nth-child(4) {
7810+
-webkit-animation-delay: 0.4s;
7811+
-moz-animation-delay: 0.4s;
7812+
-o-animation-delay: 0.4s;
7813+
animation-delay: 0.4s;
7814+
}
7815+
/* line 622, sass/app.scss */
7816+
.loading .bars div:nth-child(5) {
7817+
-webkit-animation-delay: 0.5s;
7818+
-moz-animation-delay: 0.5s;
7819+
-o-animation-delay: 0.5s;
7820+
animation-delay: 0.5s;
7821+
}
7822+
/* line 622, sass/app.scss */
7823+
.loading .bars div:nth-child(6) {
7824+
-webkit-animation-delay: 0.6s;
7825+
-moz-animation-delay: 0.6s;
7826+
-o-animation-delay: 0.6s;
7827+
animation-delay: 0.6s;
7828+
}
7829+
/* line 622, sass/app.scss */
7830+
.loading .bars div:nth-child(7) {
7831+
-webkit-animation-delay: 0.7s;
7832+
-moz-animation-delay: 0.7s;
7833+
-o-animation-delay: 0.7s;
7834+
animation-delay: 0.7s;
7835+
}
7836+
/* line 622, sass/app.scss */
7837+
.loading .bars div:nth-child(8) {
7838+
-webkit-animation-delay: 0.8s;
7839+
-moz-animation-delay: 0.8s;
7840+
-o-animation-delay: 0.8s;
7841+
animation-delay: 0.8s;
7842+
}
7843+
/* line 622, sass/app.scss */
7844+
.loading .bars div:nth-child(9) {
7845+
-webkit-animation-delay: 0.9s;
7846+
-moz-animation-delay: 0.9s;
7847+
-o-animation-delay: 0.9s;
7848+
animation-delay: 0.9s;
7849+
}
7850+
/* line 622, sass/app.scss */
7851+
.loading .bars div:nth-child(10) {
7852+
-webkit-animation-delay: 1s;
7853+
-moz-animation-delay: 1s;
7854+
-o-animation-delay: 1s;
7855+
animation-delay: 1s;
7856+
}
7857+
/* line 629, sass/app.scss */
7858+
.loading .text {
7859+
color: red;
7860+
text-transform: uppercase;
7861+
font-weight: bold;
7862+
margin-top: 5px;
7863+
position: relative;
7864+
right: 5px;
7865+
}
7866+
7867+
@-moz-keyframes loader {
7868+
/* line 640, sass/app.scss */
7869+
50% {
7870+
height: 3px;
7871+
margin-top: 37px;
7872+
opacity: .1;
7873+
}
7874+
}
7875+
7876+
@-webkit-keyframes loader {
7877+
/* line 640, sass/app.scss */
7878+
50% {
7879+
height: 3px;
7880+
margin-top: 37px;
7881+
opacity: .1;
7882+
}
7883+
}
7884+
7885+
@-o-keyframes loader {
7886+
/* line 640, sass/app.scss */
7887+
50% {
7888+
height: 3px;
7889+
margin-top: 37px;
7890+
opacity: .1;
7891+
}
7892+
}
7893+
7894+
@keyframes loader {
7895+
/* line 640, sass/app.scss */
7896+
50% {
7897+
height: 3px;
7898+
margin-top: 37px;
7899+
opacity: .1;
7900+
}
7901+
}

‎stylesheets/sass/app.scss‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,9 +594,48 @@ form.custom .custom.dropdown.open.medium ul {
594594
}
595595
}
596596

597-
598597
/* For reseting magellan on top :) */
599598
.featured {
600599
position: absolute; top: 0;
601600
margin-top: - ($header-height -$menu-height)+px; display: block;
601+
}
602+
603+
604+
//---------------------------------------------------------------------------------
605+
// Loading
606+
//---------------------------------------------------------------------------------
607+
608+
.loading{
609+
width:100px;
610+
height:50px;
611+
margin:20px auto;
612+
613+
.bars {
614+
div {
615+
height:40px;
616+
width:3px;
617+
background: $primary-color;
618+
display:inline-block;
619+
@include animation(loader 1.3s infinite);
620+
621+
@for $i from 1 through 10 {
622+
&:nth-child(#{$i}) {
623+
@include animation-delay(($i*0.1)+s);
624+
}
625+
}
626+
}
627+
}
628+
629+
.text {
630+
color: $primary-color;
631+
text-transform: uppercase;
632+
font-weight:bold;
633+
margin-top: 5px;
634+
position: relative;
635+
right: 5px;
636+
}
637+
}
638+
639+
@include keyframes(loader) {
640+
50% { height:3px; margin-top:37px; opacity:.1; }
602641
}

‎views/loading.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
Loading...
1+
<div class="loading">
2+
<div class="bars">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
<div></div>
8+
<div></div>
9+
<div></div>
10+
<div></div>
11+
<div></div>
12+
<div></div>
13+
</div>
14+
<div class="text">
15+
Loading
16+
</div>
17+
</div>

0 commit comments

Comments
 (0)