@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300); html { font-family: 'Open Sans', Helvetica, arial, sans-serif; text-align: center; background-color: #eeeeee; color: #333333; } html *, html *:before, html *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { text-align: center; font-family: 'Raleway', 'Open Sans', sans-serif; } a { /*color: #333333;*/ text-decoration: none; } /* Universal styling */ [class^="shaft-load"] { margin: 50px auto; width: 60px; height: 30px; } [class^="shaft-load"] > div { float: left; background: #893878; height: 100%; width: 5px; margin-right: 1px; display: inline-block; } [class^="shaft-load"] .shaft1 { -webkit-animation-delay: 0.05s; -moz-animation-delay: 0.05s; -o-animation-delay: 0.05s; animation-delay: 0.05s; } [class^="shaft-load"] .shaft2 { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } [class^="shaft-load"] .shaft3 { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -o-animation-delay: 0.15s; animation-delay: 0.15s; } [class^="shaft-load"] .shaft4 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } [class^="shaft-load"] .shaft5 { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; } [class^="shaft-load"] .shaft6 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } [class^="shaft-load"] .shaft7 { -webkit-animation-delay: 0.35s; -moz-animation-delay: 0.35s; -o-animation-delay: 0.35s; animation-delay: 0.35s; } [class^="shaft-load"] .shaft8 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } [class^="shaft-load"] .shaft9 { -webkit-animation-delay: 0.45s; -moz-animation-delay: 0.45s; -o-animation-delay: 0.45s; animation-delay: 0.45s; } [class^="shaft-load"] .shaft10 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } /* Shaft 1 */ .shaft-load > div { background-color: #5d8341; -webkit-animation: loading 1.5s infinite ease-in-out; -moz-animation: loading 1.5s infinite ease-in-out; -o-animation: loading 1.5s infinite ease-in-out; animation: loading 1.5s infinite ease-in-out; -webkit-transform: scaleY(0.05) translateX(-10px); -moz-transform: scaleY(0.05) translateX(-10px); -ms-transform: scaleY(0.05) translateX(-10px); -o-transform: scaleY(0.05) translateX(-10px); transform: scaleY(0.05) translateX(-10px); } @-webkit-keyframes loading { 50% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background-color: #9dc182; } } @-moz-keyframes loading { 50% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background-color: #9dc182; } } @-o-keyframes loading { 50% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background-color: #9dc182; } } @keyframes loading { 50% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background-color: #9dc182; } } /* Shaft 2 */ .shaft-load2 > div { background-color: #37493e; -webkit-animation: loading2 1.5s infinite ease-in-out; -moz-animation: loading2 1.5s infinite ease-in-out; -o-animation: loading2 1.5s infinite ease-in-out; animation: loading2 1.5s infinite ease-in-out; -webkit-transform: scaleY(0.05) translateX(-5px); -moz-transform: scaleY(0.05) translateX(-5px); -ms-transform: scaleY(0.05) translateX(-5px); -o-transform: scaleY(0.05) translateX(-5px); transform: scaleY(0.05) translateX(-5px); } @-webkit-keyframes loading2 { 10% { background: #6e917b; } 15% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background: #6e917b; } 90%, 100% { -webkit-transform: scaleY(0.05) translateX(-5px); -moz-transform: scaleY(0.05) translateX(-5px); -ms-transform: scaleY(0.05) translateX(-5px); -o-transform: scaleY(0.05) translateX(-5px); transform: scaleY(0.05) translateX(-5px); } } @-moz-keyframes loading2 { 10% { background: #6e917b; } 15% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background: #6e917b; } 90%, 100% { -webkit-transform: scaleY(0.05) translateX(-5px); -moz-transform: scaleY(0.05) translateX(-5px); -ms-transform: scaleY(0.05) translateX(-5px); -o-transform: scaleY(0.05) translateX(-5px); transform: scaleY(0.05) translateX(-5px); } } @-o-keyframes loading2 { 10% { background: #6e917b; } 15% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background: #6e917b; } 90%, 100% { -webkit-transform: scaleY(0.05) translateX(-5px); -moz-transform: scaleY(0.05) translateX(-5px); -ms-transform: scaleY(0.05) translateX(-5px); -o-transform: scaleY(0.05) translateX(-5px); transform: scaleY(0.05) translateX(-5px); } } @keyframes loading2 { 10% { background: #6e917b; } 15% { -webkit-transform: scaleY(1.2) translateX(10px); -moz-transform: scaleY(1.2) translateX(10px); -ms-transform: scaleY(1.2) translateX(10px); -o-transform: scaleY(1.2) translateX(10px); transform: scaleY(1.2) translateX(10px); background: #6e917b; } 90%, 100% { -webkit-transform: scaleY(0.05) translateX(-5px); -moz-transform: scaleY(0.05) translateX(-5px); -ms-transform: scaleY(0.05) translateX(-5px); -o-transform: scaleY(0.05) translateX(-5px); transform: scaleY(0.05) translateX(-5px); } } /* Shaft 3 */ .shaft-load3 { position: relative; width: 100px; height: 100px; } .shaft-load3 > div { background: transparent; border: 4px solid transparent; border-color: transparent transparent transparent #506248; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-transform: translate(-50%, -50%) rotate(0); -moz-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); -o-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); -webkit-animation: loading3 2s infinite ease-in-out; -moz-animation: loading3 2s infinite ease-in-out; -o-animation: loading3 2s infinite ease-in-out; animation: loading3 2s infinite ease-in-out; } .shaft-load3 .shaft1 { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; width: 20px; height: 20px; } .shaft-load3 .shaft2 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; width: 25px; height: 25px; } .shaft-load3 .shaft3 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; width: 30px; height: 30px; } .shaft-load3 .shaft4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; width: 35px; height: 35px; } .shaft-load3 .shaft5 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; width: 40px; height: 40px; } .shaft-load3 .shaft6 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; width: 45px; height: 45px; } .shaft-load3 .shaft7 { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; width: 50px; height: 50px; } .shaft-load3 .shaft8 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; width: 55px; height: 55px; } .shaft-load3 .shaft9 { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; width: 60px; height: 60px; } .shaft-load3 .shaft10 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; width: 65px; height: 65px; } @-webkit-keyframes loading3 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent rgba(143, 165, 132, 0.1) #8fa584; } 75% { border-color: rgba(143, 165, 132, 0.1) transparent transparent #8fa584; } } @-moz-keyframes loading3 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent rgba(143, 165, 132, 0.1) #8fa584; } 75% { border-color: rgba(143, 165, 132, 0.1) transparent transparent #8fa584; } } @-o-keyframes loading3 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent rgba(143, 165, 132, 0.1) #8fa584; } 75% { border-color: rgba(143, 165, 132, 0.1) transparent transparent #8fa584; } } @keyframes loading3 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent rgba(143, 165, 132, 0.1) #8fa584; } 75% { border-color: rgba(143, 165, 132, 0.1) transparent transparent #8fa584; } } /* Shaft 4 */ .shaft-load4 { margin-top: 80px; width: 80px; } .shaft-load4 > div { background-color: #693e58; margin-right: 0; -webkit-animation: loading4 1.5s infinite ease-in-out; -moz-animation: loading4 1.5s infinite ease-in-out; -o-animation: loading4 1.5s infinite ease-in-out; animation: loading4 1.5s infinite ease-in-out; width: 8px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scaleY(0.1); -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -o-transform: scaleY(0.1); transform: scaleY(0.1); } @-webkit-keyframes loading4 { 50% { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -ms-transform: scaleY(1.5); -o-transform: scaleY(1.5); transform: scaleY(1.5); background: #af7899; opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes loading4 { 50% { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -ms-transform: scaleY(1.5); -o-transform: scaleY(1.5); transform: scaleY(1.5); background: #af7899; opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes loading4 { 50% { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -ms-transform: scaleY(1.5); -o-transform: scaleY(1.5); transform: scaleY(1.5); background: #af7899; opacity: 1; filter: alpha(opacity=100); } } @keyframes loading4 { 50% { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -ms-transform: scaleY(1.5); -o-transform: scaleY(1.5); transform: scaleY(1.5); background: #af7899; opacity: 1; filter: alpha(opacity=100); } } /* Shaft 5 */ .shaft-load5 { height: 40px; } .shaft-load5 > div { background-color: #683276; position: relative; bottom: 0; margin-top: 35px; height: 5px; -webkit-animation: loading5 1.5s infinite ease-in-out; -moz-animation: loading5 1.5s infinite ease-in-out; -o-animation: loading5 1.5s infinite ease-in-out; animation: loading5 1.5s infinite ease-in-out; } .shaft-load5 .shaft1 { -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; } .shaft-load5 .shaft2 { -webkit-animation-delay: -1.4s; -moz-animation-delay: -1.4s; -o-animation-delay: -1.4s; animation-delay: -1.4s; } .shaft-load5 .shaft3 { -webkit-animation-delay: -1.3s; -moz-animation-delay: -1.3s; -o-animation-delay: -1.3s; animation-delay: -1.3s; } .shaft-load5 .shaft4 { -webkit-animation-delay: -1.2s; -moz-animation-delay: -1.2s; -o-animation-delay: -1.2s; animation-delay: -1.2s; } .shaft-load5 .shaft5 { -webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s; } .shaft-load5 .shaft6 { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s; } .shaft-load5 .shaft7 { -webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s; } .shaft-load5 .shaft8 { -webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s; } .shaft-load5 .shaft9 { -webkit-animation-delay: -0.7s; -moz-animation-delay: -0.7s; -o-animation-delay: -0.7s; animation-delay: -0.7s; } .shaft-load5 .shaft10 { -webkit-animation-delay: -0.6s; -moz-animation-delay: -0.6s; -o-animation-delay: -0.6s; animation-delay: -0.6s; } .shaft-load5 .shaft11 { -webkit-animation-delay: -0.5s; -moz-animation-delay: -0.5s; -o-animation-delay: -0.5s; animation-delay: -0.5s; } @-webkit-keyframes loading5 { 50% { height: 100%; margin-top: 0; background: #ad69bf; } } @-moz-keyframes loading5 { 50% { height: 100%; margin-top: 0; background: #ad69bf; } } @-o-keyframes loading5 { 50% { height: 100%; margin-top: 0; background: #ad69bf; } } @keyframes loading5 { 50% { height: 100%; margin-top: 0; background: #ad69bf; } } /* Shaft 6 */ .shaft-load6 { height: 40px; width: 90px; overflow: hidden; } .shaft-load6 > div { background-color: #564e94; width: 8px; position: relative; bottom: -2px; margin-top: 37px; height: 3px; transform: skewY(0deg); -webkit-animation: loading6 1.5s infinite ease-in-out; -moz-animation: loading6 1.5s infinite ease-in-out; -o-animation: loading6 1.5s infinite ease-in-out; animation: loading6 1.5s infinite ease-in-out; } @-webkit-keyframes loading6 { 25% { transform: skewY(25deg); } 50% { height: 100%; transform: skewY(0); margin-top: 0; background: #9e99c9; } 75% { transform: skewY(-25deg); } } @-moz-keyframes loading6 { 25% { transform: skewY(25deg); } 50% { height: 100%; transform: skewY(0); margin-top: 0; background: #9e99c9; } 75% { transform: skewY(-25deg); } } @-o-keyframes loading6 { 25% { transform: skewY(25deg); } 50% { height: 100%; transform: skewY(0); margin-top: 0; background: #9e99c9; } 75% { transform: skewY(-25deg); } } @keyframes loading6 { 25% { transform: skewY(25deg); } 50% { height: 100%; transform: skewY(0); margin-top: 0; background: #9e99c9; } 75% { transform: skewY(-25deg); } } /* Shaft 7 */ .shaft-load7 > div { background-color: #5d7690; height: 2px; -webkit-animation: loading7 1s infinite ease-in-out; -moz-animation: loading7 1s infinite ease-in-out; -o-animation: loading7 1s infinite ease-in-out; animation: loading7 1s infinite ease-in-out; -webkit-transform: translateY"("-10px")"; -moz-transform: translateY"("-10px")"; -ms-transform: translateY"("-10px")"; -o-transform: translateY"("-10px")"; transform: translateY"("-10px")"; } @-webkit-keyframes loading7 { 50% { background: #a7b6c6; -webkit-transform: translateY"("10px")"; -moz-transform: translateY"("10px")"; -ms-transform: translateY"("10px")"; -o-transform: translateY"("10px")"; transform: translateY"("10px")"; } } @-moz-keyframes loading7 { 50% { background: #a7b6c6; -webkit-transform: translateY"("10px")"; -moz-transform: translateY"("10px")"; -ms-transform: translateY"("10px")"; -o-transform: translateY"("10px")"; transform: translateY"("10px")"; } } @-o-keyframes loading7 { 50% { background: #a7b6c6; -webkit-transform: translateY"("10px")"; -moz-transform: translateY"("10px")"; -ms-transform: translateY"("10px")"; -o-transform: translateY"("10px")"; transform: translateY"("10px")"; } } @keyframes loading7 { 50% { background: #a7b6c6; -webkit-transform: translateY"("10px")"; -moz-transform: translateY"("10px")"; -ms-transform: translateY"("10px")"; -o-transform: translateY"("10px")"; transform: translateY"("10px")"; } } /* Shaft 8 */ .shaft-load8 { width: 92px; } .shaft-load8 > div { background-color: #728f5d; height: 5px; margin-right: 0; -webkit-animation: loading8 1s infinite ease-in-out; -moz-animation: loading8 1s infinite ease-in-out; -o-animation: loading8 1s infinite ease-in-out; animation: loading8 1s infinite ease-in-out; } @-webkit-keyframes loading8 { 80% { background: #b3c5a6; margin-right: 5px; -webkit-transform: translateX"("-10px")"; -moz-transform: translateX"("-10px")"; -ms-transform: translateX"("-10px")"; -o-transform: translateX"("-10px")"; transform: translateX"("-10px")"; } } @-moz-keyframes loading8 { 80% { background: #b3c5a6; margin-right: 5px; -webkit-transform: translateX"("-10px")"; -moz-transform: translateX"("-10px")"; -ms-transform: translateX"("-10px")"; -o-transform: translateX"("-10px")"; transform: translateX"("-10px")"; } } @-o-keyframes loading8 { 80% { background: #b3c5a6; margin-right: 5px; -webkit-transform: translateX"("-10px")"; -moz-transform: translateX"("-10px")"; -ms-transform: translateX"("-10px")"; -o-transform: translateX"("-10px")"; transform: translateX"("-10px")"; } } @keyframes loading8 { 80% { background: #b3c5a6; margin-right: 5px; -webkit-transform: translateX"("-10px")"; -moz-transform: translateX"("-10px")"; -ms-transform: translateX"("-10px")"; -o-transform: translateX"("-10px")"; transform: translateX"("-10px")"; } } /* Shaft 9 */ .shaft-load9 { position: relative; width: 100px; height: 100px; } .shaft-load9 > div { background: transparent; opacity: 0; filter: alpha(opacity=0); border: 1px solid #38326f; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-animation: loading9 1.2s infinite ease-in-out; -moz-animation: loading9 1.2s infinite ease-in-out; -o-animation: loading9 1.2s infinite ease-in-out; animation: loading9 1.2s infinite ease-in-out; } .shaft-load9 .shaft1 { background: #6e67ba; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; width: 3px; height: 3px; } .shaft-load9 .shaft2 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; width: 10px; height: 10px; } .shaft-load9 .shaft3 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; width: 20px; height: 20px; } .shaft-load9 .shaft4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; width: 30px; height: 30px; } .shaft-load9 .shaft5 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; width: 40px; height: 40px; } .shaft-load9 .shaft6 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; width: 50px; height: 50px; } .shaft-load9 .shaft7 { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; width: 60px; height: 60px; } .shaft-load9 .shaft8 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; width: 70px; height: 70px; } .shaft-load9 .shaft9 { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; width: 80px; height: 80px; } .shaft-load9 .shaft10 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; width: 90px; height: 90px; } @-webkit-keyframes loading9 { 25% { border-color: #6e67ba; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes loading9 { 25% { border-color: #6e67ba; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes loading9 { 25% { border-color: #6e67ba; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } @keyframes loading9 { 25% { border-color: #6e67ba; opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } } /* Shaft 10 */ .shaft-load10 > div { background-color: #66646b; -webkit-animation: loading10 1.5s infinite ease-in-out; -moz-animation: loading10 1.5s infinite ease-in-out; -o-animation: loading10 1.5s infinite ease-in-out; animation: loading10 1.5s infinite ease-in-out; -webkit-transform: scaleY(0.05); -moz-transform: scaleY(0.05); -ms-transform: scaleY(0.05); -o-transform: scaleY(0.05); transform: scaleY(0.05); } .shaft-load10 .shaft1 { height: 100%; } .shaft-load10 .shaft2 { height: 110%; } .shaft-load10 .shaft3 { height: 120%; } .shaft-load10 .shaft4 { height: 130%; } .shaft-load10 .shaft5 { height: 140%; } .shaft-load10 .shaft6 { height: 150%; } .shaft-load10 .shaft7 { height: 160%; } .shaft-load10 .shaft8 { height: 170%; } .shaft-load10 .shaft9 { height: 180%; } .shaft-load10 .shaft10 { height: 190%; } @-webkit-keyframes loading10 { 50% { -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); -o-transform: scaleY(1.2); transform: scaleY(1.2); background: #a6a4aa; } } @-moz-keyframes loading10 { 50% { -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); -o-transform: scaleY(1.2); transform: scaleY(1.2); background: #a6a4aa; } } @-o-keyframes loading10 { 50% { -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); -o-transform: scaleY(1.2); transform: scaleY(1.2); background: #a6a4aa; } } @keyframes loading10 { 50% { -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); -o-transform: scaleY(1.2); transform: scaleY(1.2); background: #a6a4aa; } } /* Shaft 11 */ .shaft-load11 { position: relative; width: 100px; height: 100px; } .shaft-load11 > div { background: transparent; border: 8px solid transparent; border-color: #47444e transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-transform: translate(-50%, -50%) rotate(0); -moz-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); -o-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); -webkit-animation: loading11 2s infinite ease-in-out; -moz-animation: loading11 2s infinite ease-in-out; -o-animation: loading11 2s infinite ease-in-out; animation: loading11 2s infinite ease-in-out; } .shaft-load11 .shaft1 { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; width: 20px; height: 20px; } .shaft-load11 .shaft2 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; width: 25px; height: 25px; } .shaft-load11 .shaft3 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; width: 35px; height: 35px; } .shaft-load11 .shaft4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; width: 45px; height: 45px; } .shaft-load11 .shaft5 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; width: 55px; height: 55px; } .shaft-load11 .shaft6 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; width: 65px; height: 65px; } .shaft-load11 .shaft7 { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; width: 75px; height: 75px; } .shaft-load11 .shaft8 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; width: 80px; height: 80px; } .shaft-load11 .shaft9 { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; width: 85px; height: 85px; } .shaft-load11 .shaft10 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; width: 90px; height: 90px; } @-webkit-keyframes loading11 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: #858091 transparent; } } @-moz-keyframes loading11 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: #858091 transparent; } } @-o-keyframes loading11 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: #858091 transparent; } } @keyframes loading11 { 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: #858091 transparent; } }