芝麻web文件管理V1.00
编辑当前文件:/home/qrafawbu/www/breadwinnerv2/assets/rtl/plugins/loaders/loaders.css
/** * Copyright (c) 2016 Connor Atherton * * All animations must live in their own file * in the animations directory and be included * here. * */ /** * Styles shared by multiple animations */ /* Custom Loader.CSS */ .loader-container { position : absolute; top : 50%; right : 50%; } .double-bounce { width : 40px; height : 40px; position : relative; margin : 40px auto; } .double-bounce .child { width : 100%; height : 100%; border-radius : 50%; background-color : #333333; opacity : 0.6; position : absolute; top : 0; right : 0; -webkit-animation : doubleBounce 2s infinite ease-in-out; -moz-animation : doubleBounce 2s infinite ease-in-out; -o-animation : doubleBounce 2s infinite ease-in-out; animation : doubleBounce 2s infinite ease-in-out; } .double-bounce .double-bounce2 { -webkit-animation-delay : -1.0s; -moz-animation-delay : -1.0s; -o-animation-delay : -1.0s; animation-delay : -1.0s; } @-webkit-keyframes doubleBounce { 0%, 100% { -webkit-transform : scale(0); transform : scale(0); } 50% { -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes doubleBounce { 0%, 100% { -moz-transform : scale(0); transform : scale(0); } 50% { -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes doubleBounce { 0%, 100% { -o-transform : scale(0); transform : scale(0); } 50% { -o-transform : scale(1); transform : scale(1); } } @keyframes doubleBounce { 0%, 100% { -webkit-transform : scale(0); -moz-transform : scale(0); -o-transform : scale(0); transform : scale(0); } 50% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } .chasing-dots { width : 40px; height : 40px; position : relative; text-align : center; -webkit-animation : chasingDotsRotate 2s infinite linear; -moz-animation : chasingDotsRotate 2s infinite linear; -o-animation : chasingDotsRotate 2s infinite linear; animation : chasingDotsRotate 2s infinite linear; } .chasing-dots .child { width : 60%; height : 60%; display : inline-block; position : absolute; top : 0; background-color : #333333; border-radius : 100%; -webkit-animation : chasingDotsBounce 2s infinite ease-in-out; -moz-animation : chasingDotsBounce 2s infinite ease-in-out; -o-animation : chasingDotsBounce 2s infinite ease-in-out; animation : chasingDotsBounce 2s infinite ease-in-out; } .chasing-dots .dot2 { top : auto; bottom : 0; -webkit-animation-delay : -1s; -moz-animation-delay : -1s; -o-animation-delay : -1s; animation-delay : -1s; } @-webkit-keyframes chasingDotsRotate { 100% { -webkit-transform : rotate(-360deg); transform : rotate(-360deg); } } @-moz-keyframes chasingDotsRotate { 100% { -moz-transform : rotate(-360deg); transform : rotate(-360deg); } } @-o-keyframes chasingDotsRotate { 100% { -o-transform : rotate(-360deg); transform : rotate(-360deg); } } @keyframes chasingDotsRotate { 100% { -webkit-transform : rotate(-360deg); -moz-transform : rotate(-360deg); -o-transform : rotate(-360deg); transform : rotate(-360deg); } } @-webkit-keyframes chasingDotsBounce { 0%, 100% { -webkit-transform : scale(0); transform : scale(0); } 50% { -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes chasingDotsBounce { 0%, 100% { -moz-transform : scale(0); transform : scale(0); } 50% { -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes chasingDotsBounce { 0%, 100% { -o-transform : scale(0); transform : scale(0); } 50% { -o-transform : scale(1); transform : scale(1); } } @keyframes chasingDotsBounce { 0%, 100% { -webkit-transform : scale(0); -moz-transform : scale(0); -o-transform : scale(0); transform : scale(0); } 50% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } /* * Spinner positions * 1 2 3 * 4 5 6 * 7 8 9 */ .cube-grid { width : 40px; height : 40px; margin : 40px auto; } .cube-grid .cube { width : 33.33%; height : 33.33%; background-color : #333333; float : right; -webkit-animation : cubeGridScaleDelay 1.3s infinite ease-in-out; -moz-animation : cubeGridScaleDelay 1.3s infinite ease-in-out; -o-animation : cubeGridScaleDelay 1.3s infinite ease-in-out; animation : cubeGridScaleDelay 1.3s infinite ease-in-out; } .cube-grid .cube1 { -webkit-animation-delay : 0.2s; -moz-animation-delay : 0.2s; -o-animation-delay : 0.2s; animation-delay : 0.2s; } .cube-grid .cube2 { -webkit-animation-delay : 0.3s; -moz-animation-delay : 0.3s; -o-animation-delay : 0.3s; animation-delay : 0.3s; } .cube-grid .cube3 { -webkit-animation-delay : 0.4s; -moz-animation-delay : 0.4s; -o-animation-delay : 0.4s; animation-delay : 0.4s; } .cube-grid .cube4 { -webkit-animation-delay : 0.1s; -moz-animation-delay : 0.1s; -o-animation-delay : 0.1s; animation-delay : 0.1s; } .cube-grid .cube5 { -webkit-animation-delay : 0.2s; -moz-animation-delay : 0.2s; -o-animation-delay : 0.2s; animation-delay : 0.2s; } .cube-grid .cube6 { -webkit-animation-delay : 0.3s; -moz-animation-delay : 0.3s; -o-animation-delay : 0.3s; animation-delay : 0.3s; } .cube-grid .cube7 { -webkit-animation-delay : 0.0s; -moz-animation-delay : 0.0s; -o-animation-delay : 0.0s; animation-delay : 0.0s; } .cube-grid .cube8 { -webkit-animation-delay : 0.1s; -moz-animation-delay : 0.1s; -o-animation-delay : 0.1s; animation-delay : 0.1s; } .cube-grid .cube9 { -webkit-animation-delay : 0.2s; -moz-animation-delay : 0.2s; -o-animation-delay : 0.2s; animation-delay : 0.2s; } @-webkit-keyframes cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform : scale3D(1, 1, 1); transform : scale3D(1, 1, 1); } 35% { -webkit-transform : scale3D(0, 0, 1); transform : scale3D(0, 0, 1); } } @-moz-keyframes cubeGridScaleDelay { 0%, 70%, 100% { -moz-transform : scale3D(1, 1, 1); transform : scale3D(1, 1, 1); } 35% { -moz-transform : scale3D(0, 0, 1); transform : scale3D(0, 0, 1); } } @-o-keyframes cubeGridScaleDelay { 0%, 70%, 100% { -o-transform : scale3D(1, 1, 1); transform : scale3D(1, 1, 1); } 35% { -o-transform : scale3D(0, 0, 1); transform : scale3D(0, 0, 1); } } @keyframes cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform : scale3D(1, 1, 1); -moz-transform : scale3D(1, 1, 1); -o-transform : scale3D(1, 1, 1); transform : scale3D(1, 1, 1); } 35% { -webkit-transform : scale3D(0, 0, 1); -moz-transform : scale3D(0, 0, 1); -o-transform : scale3D(0, 0, 1); transform : scale3D(0, 0, 1); } } .fading-circle { margin : 40px auto; width : 40px; height : 40px; position : relative; } .fading-circle .circle { width : 100%; height : 100%; position : absolute; right : 0; top : 0; } .fading-circle .circle:before { content : ''; display : block; margin : 0 auto; width : 15%; height : 15%; background-color : #333333; border-radius : 100%; -webkit-animation : circleFadeDelay 1.2s infinite ease-in-out both; -moz-animation : circleFadeDelay 1.2s infinite ease-in-out both; -o-animation : circleFadeDelay 1.2s infinite ease-in-out both; animation : circleFadeDelay 1.2s infinite ease-in-out both; } .fading-circle .circle2 { -webkit-transform : rotate(-30deg); -moz-transform : rotate(-30deg); -ms-transform : rotate(-30deg); -o-transform : rotate(-30deg); transform : rotate(-30deg); } .fading-circle .circle2:before { -webkit-animation-delay : -1.1s; -moz-animation-delay : -1.1s; -o-animation-delay : -1.1s; animation-delay : -1.1s; } .fading-circle .circle3 { -webkit-transform : rotate(-60deg); -moz-transform : rotate(-60deg); -ms-transform : rotate(-60deg); -o-transform : rotate(-60deg); transform : rotate(-60deg); } .fading-circle .circle3:before { -webkit-animation-delay : -1s; -moz-animation-delay : -1s; -o-animation-delay : -1s; animation-delay : -1s; } .fading-circle .circle4 { -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -ms-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); } .fading-circle .circle4:before { -webkit-animation-delay : -0.9s; -moz-animation-delay : -0.9s; -o-animation-delay : -0.9s; animation-delay : -0.9s; } .fading-circle .circle5 { -webkit-transform : rotate(-120deg); -moz-transform : rotate(-120deg); -ms-transform : rotate(-120deg); -o-transform : rotate(-120deg); transform : rotate(-120deg); } .fading-circle .circle5:before { -webkit-animation-delay : -0.8s; -moz-animation-delay : -0.8s; -o-animation-delay : -0.8s; animation-delay : -0.8s; } .fading-circle .circle6 { -webkit-transform : rotate(-150deg); -moz-transform : rotate(-150deg); -ms-transform : rotate(-150deg); -o-transform : rotate(-150deg); transform : rotate(-150deg); } .fading-circle .circle6:before { -webkit-animation-delay : -0.7s; -moz-animation-delay : -0.7s; -o-animation-delay : -0.7s; animation-delay : -0.7s; } .fading-circle .circle7 { -webkit-transform : rotate(-180deg); -moz-transform : rotate(-180deg); -ms-transform : rotate(-180deg); -o-transform : rotate(-180deg); transform : rotate(-180deg); } .fading-circle .circle7:before { -webkit-animation-delay : -0.6s; -moz-animation-delay : -0.6s; -o-animation-delay : -0.6s; animation-delay : -0.6s; } .fading-circle .circle8 { -webkit-transform : rotate(-210deg); -moz-transform : rotate(-210deg); -ms-transform : rotate(-210deg); -o-transform : rotate(-210deg); transform : rotate(-210deg); } .fading-circle .circle8:before { -webkit-animation-delay : -0.5s; -moz-animation-delay : -0.5s; -o-animation-delay : -0.5s; animation-delay : -0.5s; } .fading-circle .circle9 { -webkit-transform : rotate(-240deg); -moz-transform : rotate(-240deg); -ms-transform : rotate(-240deg); -o-transform : rotate(-240deg); transform : rotate(-240deg); } .fading-circle .circle9:before { -webkit-animation-delay : -0.4s; -moz-animation-delay : -0.4s; -o-animation-delay : -0.4s; animation-delay : -0.4s; } .fading-circle .circle10 { -webkit-transform : rotate(-270deg); -moz-transform : rotate(-270deg); -ms-transform : rotate(-270deg); -o-transform : rotate(-270deg); transform : rotate(-270deg); } .fading-circle .circle10:before { -webkit-animation-delay : -0.3s; -moz-animation-delay : -0.3s; -o-animation-delay : -0.3s; animation-delay : -0.3s; } .fading-circle .circle11 { -webkit-transform : rotate(-300deg); -moz-transform : rotate(-300deg); -ms-transform : rotate(-300deg); -o-transform : rotate(-300deg); transform : rotate(-300deg); } .fading-circle .circle11:before { -webkit-animation-delay : -0.2s; -moz-animation-delay : -0.2s; -o-animation-delay : -0.2s; animation-delay : -0.2s; } .fading-circle .circle12 { -webkit-transform : rotate(-330deg); -moz-transform : rotate(-330deg); -ms-transform : rotate(-330deg); -o-transform : rotate(-330deg); transform : rotate(-330deg); } .fading-circle .circle12:before { -webkit-animation-delay : -0.1s; -moz-animation-delay : -0.1s; -o-animation-delay : -0.1s; animation-delay : -0.1s; } @-webkit-keyframes circleFadeDelay { 0%, 39%, 100% { opacity : 0; } 40% { opacity : 1; } } @-moz-keyframes circleFadeDelay { 0%, 39%, 100% { opacity : 0; } 40% { opacity : 1; } } @-o-keyframes circleFadeDelay { 0%, 39%, 100% { opacity : 0; } 40% { opacity : 1; } } @keyframes circleFadeDelay { 0%, 39%, 100% { opacity : 0; } 40% { opacity : 1; } } .folding-cube { width : 40px; height : 40px; position : relative; -webkit-transform : rotateZ(-45deg); -moz-transform : rotateZ(-45deg); -ms-transform : rotate(-45deg); -o-transform : rotateZ(-45deg); transform : rotateZ(-45deg); } .folding-cube .cube { float : right; width : 50%; height : 50%; position : relative; -webkit-transform : scale(1.1); -moz-transform : scale(1.1); -ms-transform : scale(1.1); -o-transform : scale(1.1); transform : scale(1.1); } .folding-cube .cube:before { content : ''; position : absolute; top : 0; right : 0; width : 100%; height : 100%; background-color : #333333; -webkit-animation : foldCubeAngle 2.4s infinite linear both; -moz-animation : foldCubeAngle 2.4s infinite linear both; -o-animation : foldCubeAngle 2.4s infinite linear both; animation : foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin : 0 100%; -moz-transform-origin : 0 100%; -ms-transform-origin : 0 100%; -o-transform-origin : 0 100%; transform-origin : 0 100%; } .folding-cube .cube2 { -webkit-transform : scale(1.1) rotateZ(-90deg); -moz-transform : scale(1.1) rotateZ(-90deg); -ms-transform : scale(1.1) rotate(-90deg); -o-transform : scale(1.1) rotateZ(-90deg); transform : scale(1.1) rotateZ(-90deg); } .folding-cube .cube2:before { -webkit-animation-delay : 0.3s; -moz-animation-delay : 0.3s; -o-animation-delay : 0.3s; animation-delay : 0.3s; } .folding-cube .cube3 { -webkit-transform : scale(1.1) rotateZ(-180deg); -moz-transform : scale(1.1) rotateZ(-180deg); -ms-transform : scale(1.1) rotate(-180deg); -o-transform : scale(1.1) rotateZ(-180deg); transform : scale(1.1) rotateZ(-180deg); } .folding-cube .cube3:before { -webkit-animation-delay : 0.6s; -moz-animation-delay : 0.6s; -o-animation-delay : 0.6s; animation-delay : 0.6s; } .folding-cube .cube4 { -webkit-transform : scale(1.1) rotateZ(-270deg); -moz-transform : scale(1.1) rotateZ(-270deg); -ms-transform : scale(1.1) rotate(-270deg); -o-transform : scale(1.1) rotateZ(-270deg); transform : scale(1.1) rotateZ(-270deg); } .folding-cube .cube4:before { -webkit-animation-delay : 0.9s; -moz-animation-delay : 0.9s; -o-animation-delay : 0.9s; animation-delay : 0.9s; } @-webkit-keyframes foldCubeAngle { 0%, 10% { -webkit-transform : perspective(140px) rotateX(-180deg); transform : perspective(140px) rotateX(-180deg); opacity : 0; } 25%, 75% { -webkit-transform : perspective(140px) rotateX(0deg); transform : perspective(140px) rotateX(0deg); opacity : 1; } 90%, 100% { -webkit-transform : perspective(140px) rotateY(180deg); transform : perspective(140px) rotateY(180deg); opacity : 0; } } @-moz-keyframes foldCubeAngle { 0%, 10% { -moz-transform : perspective(140px) rotateX(-180deg); transform : perspective(140px) rotateX(-180deg); opacity : 0; } 25%, 75% { -moz-transform : perspective(140px) rotateX(0deg); transform : perspective(140px) rotateX(0deg); opacity : 1; } 90%, 100% { -moz-transform : perspective(140px) rotateY(180deg); transform : perspective(140px) rotateY(180deg); opacity : 0; } } @-o-keyframes foldCubeAngle { 0%, 10% { transform : perspective(140px) rotateX(-180deg); opacity : 0; } 25%, 75% { transform : perspective(140px) rotateX(0deg); opacity : 1; } 90%, 100% { transform : perspective(140px) rotateY(180deg); opacity : 0; } } @keyframes foldCubeAngle { 0%, 10% { -webkit-transform : perspective(140px) rotateX(-180deg); -moz-transform : perspective(140px) rotateX(-180deg); transform : perspective(140px) rotateX(-180deg); opacity : 0; } 25%, 75% { -webkit-transform : perspective(140px) rotateX(0deg); -moz-transform : perspective(140px) rotateX(0deg); transform : perspective(140px) rotateX(0deg); opacity : 1; } 90%, 100% { -webkit-transform : perspective(140px) rotateY(180deg); -moz-transform : perspective(140px) rotateY(180deg); transform : perspective(140px) rotateY(180deg); opacity : 0; } } /** * Dots */ @-webkit-keyframes scale { 0% { -webkit-transform : scale(1); transform : scale(1); opacity : 1; } 45% { -webkit-transform : scale(0.1); transform : scale(0.1); opacity : 0.7; } 80% { -webkit-transform : scale(1); transform : scale(1); opacity : 1; } } @-moz-keyframes scale { 0% { -moz-transform : scale(1); transform : scale(1); opacity : 1; } 45% { -moz-transform : scale(0.1); transform : scale(0.1); opacity : 0.7; } 80% { -moz-transform : scale(1); transform : scale(1); opacity : 1; } } @-o-keyframes scale { 0% { -o-transform : scale(1); transform : scale(1); opacity : 1; } 45% { -o-transform : scale(0.1); transform : scale(0.1); opacity : 0.7; } 80% { -o-transform : scale(1); transform : scale(1); opacity : 1; } } @keyframes scale { 0% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 1; } 45% { -webkit-transform : scale(0.1); -moz-transform : scale(0.1); -o-transform : scale(0.1); transform : scale(0.1); opacity : 0.7; } 80% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 1; } } .ball-pulse > div:nth-child(1) { -webkit-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .ball-pulse > div:nth-child(2) { -webkit-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .ball-pulse > div:nth-child(3) { -webkit-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .ball-pulse > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; } @-webkit-keyframes ball-pulse-sync { 33% { -webkit-transform : translateY(10px); transform : translateY(10px); } 66% { -webkit-transform : translateY(-10px); transform : translateY(-10px); } 100% { -webkit-transform : translateY(0); transform : translateY(0); } } @-moz-keyframes ball-pulse-sync { 33% { -moz-transform : translateY(10px); transform : translateY(10px); } 66% { -moz-transform : translateY(-10px); transform : translateY(-10px); } 100% { -moz-transform : translateY(0); transform : translateY(0); } } @-o-keyframes ball-pulse-sync { 33% { -o-transform : translateY(10px); transform : translateY(10px); } 66% { -o-transform : translateY(-10px); transform : translateY(-10px); } 100% { -o-transform : translateY(0); transform : translateY(0); } } @keyframes ball-pulse-sync { 33% { -webkit-transform : translateY(10px); -moz-transform : translateY(10px); -o-transform : translateY(10px); transform : translateY(10px); } 66% { -webkit-transform : translateY(-10px); -moz-transform : translateY(-10px); -o-transform : translateY(-10px); transform : translateY(-10px); } 100% { -webkit-transform : translateY(0); -moz-transform : translateY(0); -o-transform : translateY(0); transform : translateY(0); } } .ball-pulse-sync > div:nth-child(1) { -webkit-animation : ball-pulse-sync 0.6s -0.14s infinite ease-in-out; -moz-animation : ball-pulse-sync 0.6s -0.14s infinite ease-in-out; -o-animation : ball-pulse-sync 0.6s -0.14s infinite ease-in-out; animation : ball-pulse-sync 0.6s -0.14s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(2) { -webkit-animation : ball-pulse-sync 0.6s -0.07s infinite ease-in-out; -moz-animation : ball-pulse-sync 0.6s -0.07s infinite ease-in-out; -o-animation : ball-pulse-sync 0.6s -0.07s infinite ease-in-out; animation : ball-pulse-sync 0.6s -0.07s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(3) { -webkit-animation : ball-pulse-sync 0.6s 0s infinite ease-in-out; -moz-animation : ball-pulse-sync 0.6s 0s infinite ease-in-out; -o-animation : ball-pulse-sync 0.6s 0s infinite ease-in-out; animation : ball-pulse-sync 0.6s 0s infinite ease-in-out; } .ball-pulse-sync > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; } @-webkit-keyframes ball-scale { 0% { -webkit-transform : scale(0); transform : scale(0); } 100% { -webkit-transform : scale(1); transform : scale(1); opacity : 0; } } @-moz-keyframes ball-scale { 0% { -moz-transform : scale(0); transform : scale(0); } 100% { -moz-transform : scale(1); transform : scale(1); opacity : 0; } } @-o-keyframes ball-scale { 0% { -o-transform : scale(0); transform : scale(0); } 100% { -o-transform : scale(1); transform : scale(1); opacity : 0; } } @keyframes ball-scale { 0% { -webkit-transform : scale(0); -moz-transform : scale(0); -o-transform : scale(0); transform : scale(0); } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 0; } } .ball-scale > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; height : 60px; width : 60px; -webkit-animation : ball-scale 1s 0s ease-in-out infinite; -moz-animation : ball-scale 1s 0s ease-in-out infinite; -o-animation : ball-scale 1s 0s ease-in-out infinite; animation : ball-scale 1s 0s ease-in-out infinite; } @keyframes ball-scale { 0% { -webkit-transform : scale(0); -moz-transform : scale(0); -o-transform : scale(0); transform : scale(0); } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 0; } } .ball-scale > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; height : 60px; width : 60px; -webkit-animation : ball-scale 1s 0s ease-in-out infinite; -moz-animation : ball-scale 1s 0s ease-in-out infinite; -o-animation : ball-scale 1s 0s ease-in-out infinite; animation : ball-scale 1s 0s ease-in-out infinite; } .ball-scale-random { width : 37px; height : 40px; } .ball-scale-random > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; display : inline-block; height : 30px; width : 30px; -webkit-animation : ball-scale 1s 0s ease-in-out infinite; -moz-animation : ball-scale 1s 0s ease-in-out infinite; -o-animation : ball-scale 1s 0s ease-in-out infinite; animation : ball-scale 1s 0s ease-in-out infinite; } .ball-scale-random > div:nth-child(1) { margin-right : -7px; -webkit-animation : ball-scale 1s 0.2s ease-in-out infinite; -moz-animation : ball-scale 1s 0.2s ease-in-out infinite; -o-animation : ball-scale 1s 0.2s ease-in-out infinite; animation : ball-scale 1s 0.2s ease-in-out infinite; } .ball-scale-random > div:nth-child(3) { margin-right : -2px; margin-top : 9px; -webkit-animation : ball-scale 1s 0.5s ease-in-out infinite; -moz-animation : ball-scale 1s 0.5s ease-in-out infinite; -o-animation : ball-scale 1s 0.5s ease-in-out infinite; animation : ball-scale 1s 0.5s ease-in-out infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); transform : rotate(-360deg); } } @-moz-keyframes rotate { 0% { -moz-transform : rotate(0deg); transform : rotate(0deg); } 50% { -moz-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -moz-transform : rotate(-360deg); transform : rotate(-360deg); } } @-o-keyframes rotate { 0% { -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -o-transform : rotate(-360deg); transform : rotate(-360deg); } } @keyframes rotate { 0% { -webkit-transform : rotate(0deg); -moz-transform : rotate(0deg); -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); -moz-transform : rotate(-180deg); -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); -moz-transform : rotate(-360deg); -o-transform : rotate(-360deg); transform : rotate(-360deg); } } .ball-rotate { position : relative; } .ball-rotate > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : relative; } .ball-rotate > div:first-child { -webkit-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; -moz-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; -o-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; } .ball-rotate > div:before, .ball-rotate > div:after { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; content : ''; position : absolute; opacity : 0.8; } .ball-rotate > div:before { top : 0; right : -28px; } .ball-rotate > div:after { top : 0; right : 25px; } @keyframes rotate { 0% { -webkit-transform : rotate(0deg) scale(1); -moz-transform : rotate(0deg) scale(1); -o-transform : rotate(0deg) scale(1); transform : rotate(0deg) scale(1); } 50% { -webkit-transform : rotate(-180deg) scale(0.6); -moz-transform : rotate(-180deg) scale(0.6); -o-transform : rotate(-180deg) scale(0.6); transform : rotate(-180deg) scale(0.6); } 100% { -webkit-transform : rotate(-360deg) scale(1); -moz-transform : rotate(-360deg) scale(1); -o-transform : rotate(-360deg) scale(1); transform : rotate(-360deg) scale(1); } } .ball-clip-rotate > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; border : 2px solid #55595C; border-bottom-color : transparent; height : 25px; width : 25px; background : transparent !important; display : inline-block; -webkit-animation : rotate 0.75s 0s linear infinite; -moz-animation : rotate 0.75s 0s linear infinite; -o-animation : rotate 0.75s 0s linear infinite; animation : rotate 0.75s 0s linear infinite; } @keyframes rotate { 0% { -webkit-transform : rotate(0deg) scale(1); -moz-transform : rotate(0deg) scale(1); -o-transform : rotate(0deg) scale(1); transform : rotate(0deg) scale(1); } 50% { -webkit-transform : rotate(-180deg) scale(0.6); -moz-transform : rotate(-180deg) scale(0.6); -o-transform : rotate(-180deg) scale(0.6); transform : rotate(-180deg) scale(0.6); } 100% { -webkit-transform : rotate(-360deg) scale(1); -moz-transform : rotate(-360deg) scale(1); -o-transform : rotate(-360deg) scale(1); transform : rotate(-360deg) scale(1); } } @keyframes scale { 30% { -webkit-transform : scale(0.3); -moz-transform : scale(0.3); -o-transform : scale(0.3); transform : scale(0.3); } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } .ball-clip-rotate-pulse { position : relative; -webkit-transform : translateY(-15px); -moz-transform : translateY(-15px); -ms-transform : translateY(-15px); -o-transform : translateY(-15px); transform : translateY(-15px); } .ball-clip-rotate-pulse > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; top : 0; right : 0; border-radius : 100%; } .ball-clip-rotate-pulse > div:first-child { background : #55595C; height : 16px; width : 16px; top : 7px; right : -7px; -webkit-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } .ball-clip-rotate-pulse > div:last-child { position : absolute; border : 2px solid #55595C; width : 30px; height : 30px; right : -16px; top : -2px; background : transparent; border : 2px solid; border-color : #55595C transparent #55595C transparent; -webkit-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -webkit-animation-duration : 1s; -moz-animation-duration : 1s; -o-animation-duration : 1s; animation-duration : 1s; } @keyframes rotate { 0% { -webkit-transform : rotate(0deg) scale(1); -moz-transform : rotate(0deg) scale(1); -o-transform : rotate(0deg) scale(1); transform : rotate(0deg) scale(1); } 50% { -webkit-transform : rotate(-180deg) scale(0.6); -moz-transform : rotate(-180deg) scale(0.6); -o-transform : rotate(-180deg) scale(0.6); transform : rotate(-180deg) scale(0.6); } 100% { -webkit-transform : rotate(-360deg) scale(1); -moz-transform : rotate(-360deg) scale(1); -o-transform : rotate(-360deg) scale(1); transform : rotate(-360deg) scale(1); } } .ball-clip-rotate-multiple { position : relative; } .ball-clip-rotate-multiple > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; right : -20px; top : -20px; border : 2px solid #55595C; border-bottom-color : transparent; border-top-color : transparent; border-radius : 100%; height : 35px; width : 35px; -webkit-animation : rotate 1s 0s ease-in-out infinite; -moz-animation : rotate 1s 0s ease-in-out infinite; -o-animation : rotate 1s 0s ease-in-out infinite; animation : rotate 1s 0s ease-in-out infinite; } .ball-clip-rotate-multiple > div:last-child { display : inline-block; top : -10px; right : -10px; width : 15px; height : 15px; -webkit-animation-duration : 0.5s; -moz-animation-duration : 0.5s; -o-animation-duration : 0.5s; animation-duration : 0.5s; border-color : #55595C transparent #55595C transparent; -webkit-animation-direction : reverse; -moz-animation-direction : reverse; -o-animation-direction : reverse; animation-direction : reverse; } @-webkit-keyframes ball-scale-ripple { 0% { -webkit-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -webkit-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @-moz-keyframes ball-scale-ripple { 0% { -moz-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -moz-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @-o-keyframes ball-scale-ripple { 0% { -o-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -o-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @keyframes ball-scale-ripple { 0% { -webkit-transform : scale(0.1); -moz-transform : scale(0.1); -o-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } .ball-scale-ripple > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; height : 50px; width : 50px; border-radius : 100%; border : 2px solid #55595C; -webkit-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); -moz-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); -o-animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation : ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } @-webkit-keyframes ball-scale-ripple-multiple { 0% { -webkit-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -webkit-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @-moz-keyframes ball-scale-ripple-multiple { 0% { -moz-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -moz-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @-o-keyframes ball-scale-ripple-multiple { 0% { -o-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -o-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } @keyframes ball-scale-ripple-multiple { 0% { -webkit-transform : scale(0.1); -moz-transform : scale(0.1); -o-transform : scale(0.1); transform : scale(0.1); opacity : 1; } 70% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 0.7; } 100% { opacity : 0.0; } } .ball-scale-ripple-multiple { position : relative; -webkit-transform : translateY(-25px); -moz-transform : translateY(-25px); -ms-transform : translateY(-25px); -o-transform : translateY(-25px); transform : translateY(-25px); } .ball-scale-ripple-multiple > div:nth-child(0) { -webkit-animation-delay : -0.8s; -moz-animation-delay : -0.8s; -o-animation-delay : -0.8s; animation-delay : -0.8s; } .ball-scale-ripple-multiple > div:nth-child(1) { -webkit-animation-delay : -0.6s; -moz-animation-delay : -0.6s; -o-animation-delay : -0.6s; animation-delay : -0.6s; } .ball-scale-ripple-multiple > div:nth-child(2) { -webkit-animation-delay : -0.4s; -moz-animation-delay : -0.4s; -o-animation-delay : -0.4s; animation-delay : -0.4s; } .ball-scale-ripple-multiple > div:nth-child(3) { -webkit-animation-delay : -0.2s; -moz-animation-delay : -0.2s; -o-animation-delay : -0.2s; animation-delay : -0.2s; } .ball-scale-ripple-multiple > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; top : -2px; right : -26px; width : 50px; height : 50px; border-radius : 100%; border : 2px solid #55595C; -webkit-animation : ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); -moz-animation : ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); -o-animation : ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation : ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } @-webkit-keyframes ball-beat { 50% { opacity : 0.2; -webkit-transform : scale(0.75); transform : scale(0.75); } 100% { opacity : 1; -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes ball-beat { 50% { opacity : 0.2; -moz-transform : scale(0.75); transform : scale(0.75); } 100% { opacity : 1; -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes ball-beat { 50% { opacity : 0.2; -o-transform : scale(0.75); transform : scale(0.75); } 100% { opacity : 1; -o-transform : scale(1); transform : scale(1); } } @keyframes ball-beat { 50% { opacity : 0.2; -webkit-transform : scale(0.75); -moz-transform : scale(0.75); -o-transform : scale(0.75); transform : scale(0.75); } 100% { opacity : 1; -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } .ball-beat > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; -webkit-animation : ball-beat 0.7s 0s infinite linear; -moz-animation : ball-beat 0.7s 0s infinite linear; -o-animation : ball-beat 0.7s 0s infinite linear; animation : ball-beat 0.7s 0s infinite linear; } .ball-beat > div:nth-child(2n-1) { -webkit-animation-delay : -0.35s !important; -moz-animation-delay : -0.35s !important; -o-animation-delay : -0.35s !important; animation-delay : -0.35s !important; } @-webkit-keyframes ball-scale-multiple { 0% { -webkit-transform : scale(0); transform : scale(0); opacity : 0; } 5% { opacity : 1; } 100% { -webkit-transform : scale(1); transform : scale(1); opacity : 0; } } @-moz-keyframes ball-scale-multiple { 0% { -moz-transform : scale(0); transform : scale(0); opacity : 0; } 5% { opacity : 1; } 100% { -moz-transform : scale(1); transform : scale(1); opacity : 0; } } @-o-keyframes ball-scale-multiple { 0% { -o-transform : scale(0); transform : scale(0); opacity : 0; } 5% { opacity : 1; } 100% { -o-transform : scale(1); transform : scale(1); opacity : 0; } } @keyframes ball-scale-multiple { 0% { -webkit-transform : scale(0); -moz-transform : scale(0); -o-transform : scale(0); transform : scale(0); opacity : 0; } 5% { opacity : 1; } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 0; } } .ball-scale-multiple { position : relative; } .ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay : -0.4s; -moz-animation-delay : -0.4s; -o-animation-delay : -0.4s; animation-delay : -0.4s; } .ball-scale-multiple > div:nth-child(3) { -webkit-animation-delay : -0.2s; -moz-animation-delay : -0.2s; -o-animation-delay : -0.2s; animation-delay : -0.2s; } .ball-scale-multiple > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; top : 0; opacity : 0; margin : 0; width : 60px; height : 60px; -webkit-animation : ball-scale-multiple 1s 0s linear infinite; -moz-animation : ball-scale-multiple 1s 0s linear infinite; -o-animation : ball-scale-multiple 1s 0s linear infinite; animation : ball-scale-multiple 1s 0s linear infinite; } @-webkit-keyframes ball-triangle-path-1 { 33% { -webkit-transform : translate(-25px, -50px); transform : translate(-25px, -50px); } 66% { -webkit-transform : translate(-50px, 0px); transform : translate(-50px, 0px); } 100% { -webkit-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-moz-keyframes ball-triangle-path-1 { 33% { -moz-transform : translate(-25px, -50px); transform : translate(-25px, -50px); } 66% { -moz-transform : translate(-50px, 0px); transform : translate(-50px, 0px); } 100% { -moz-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-o-keyframes ball-triangle-path-1 { 33% { -o-transform : translate(-25px, -50px); transform : translate(-25px, -50px); } 66% { -o-transform : translate(-50px, 0px); transform : translate(-50px, 0px); } 100% { -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @keyframes ball-triangle-path-1 { 33% { -webkit-transform : translate(-25px, -50px); -moz-transform : translate(-25px, -50px); -o-transform : translate(-25px, -50px); transform : translate(-25px, -50px); } 66% { -webkit-transform : translate(-50px, 0px); -moz-transform : translate(-50px, 0px); -o-transform : translate(-50px, 0px); transform : translate(-50px, 0px); } 100% { -webkit-transform : translate(0px, 0px); -moz-transform : translate(0px, 0px); -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-webkit-keyframes ball-triangle-path-2 { 33% { -webkit-transform : translate(-25px, 50px); transform : translate(-25px, 50px); } 66% { -webkit-transform : translate(25px, 50px); transform : translate(25px, 50px); } 100% { -webkit-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-moz-keyframes ball-triangle-path-2 { 33% { -moz-transform : translate(-25px, 50px); transform : translate(-25px, 50px); } 66% { -moz-transform : translate(25px, 50px); transform : translate(25px, 50px); } 100% { -moz-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-o-keyframes ball-triangle-path-2 { 33% { -o-transform : translate(-25px, 50px); transform : translate(-25px, 50px); } 66% { -o-transform : translate(25px, 50px); transform : translate(25px, 50px); } 100% { -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @keyframes ball-triangle-path-2 { 33% { -webkit-transform : translate(-25px, 50px); -moz-transform : translate(-25px, 50px); -o-transform : translate(-25px, 50px); transform : translate(-25px, 50px); } 66% { -webkit-transform : translate(25px, 50px); -moz-transform : translate(25px, 50px); -o-transform : translate(25px, 50px); transform : translate(25px, 50px); } 100% { -webkit-transform : translate(0px, 0px); -moz-transform : translate(0px, 0px); -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-webkit-keyframes ball-triangle-path-3 { 33% { -webkit-transform : translate(50px, 0px); transform : translate(50px, 0px); } 66% { -webkit-transform : translate(25px, -50px); transform : translate(25px, -50px); } 100% { -webkit-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-moz-keyframes ball-triangle-path-3 { 33% { -moz-transform : translate(50px, 0px); transform : translate(50px, 0px); } 66% { -moz-transform : translate(25px, -50px); transform : translate(25px, -50px); } 100% { -moz-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @-o-keyframes ball-triangle-path-3 { 33% { -o-transform : translate(50px, 0px); transform : translate(50px, 0px); } 66% { -o-transform : translate(25px, -50px); transform : translate(25px, -50px); } 100% { -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } @keyframes ball-triangle-path-3 { 33% { -webkit-transform : translate(50px, 0px); -moz-transform : translate(50px, 0px); -o-transform : translate(50px, 0px); transform : translate(50px, 0px); } 66% { -webkit-transform : translate(25px, -50px); -moz-transform : translate(25px, -50px); -o-transform : translate(25px, -50px); transform : translate(25px, -50px); } 100% { -webkit-transform : translate(0px, 0px); -moz-transform : translate(0px, 0px); -o-transform : translate(0px, 0px); transform : translate(0px, 0px); } } .ball-triangle-path { position : relative; -webkit-transform : translate(29.994px, -37.50938px); -moz-transform : translate(29.994px, -37.50938px); -ms-transform : translate(29.994px, -37.50938px); -o-transform : translate(29.994px, -37.50938px); transform : translate(29.994px, -37.50938px); } .ball-triangle-path > div:nth-child(1) { -webkit-animation-name : ball-triangle-path-1; -moz-animation-name : ball-triangle-path-1; -o-animation-name : ball-triangle-path-1; animation-name : ball-triangle-path-1; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; -webkit-animation-duration : 2s; -moz-animation-duration : 2s; -o-animation-duration : 2s; animation-duration : 2s; -webkit-animation-timing-function : ease-in-out; -moz-animation-timing-function : ease-in-out; -o-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; } .ball-triangle-path > div:nth-child(2) { -webkit-animation-name : ball-triangle-path-2; -moz-animation-name : ball-triangle-path-2; -o-animation-name : ball-triangle-path-2; animation-name : ball-triangle-path-2; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; -webkit-animation-duration : 2s; -moz-animation-duration : 2s; -o-animation-duration : 2s; animation-duration : 2s; -webkit-animation-timing-function : ease-in-out; -moz-animation-timing-function : ease-in-out; -o-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; } .ball-triangle-path > div:nth-child(3) { -webkit-animation-name : ball-triangle-path-3; -moz-animation-name : ball-triangle-path-3; -o-animation-name : ball-triangle-path-3; animation-name : ball-triangle-path-3; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; -webkit-animation-duration : 2s; -moz-animation-duration : 2s; -o-animation-duration : 2s; animation-duration : 2s; -webkit-animation-timing-function : ease-in-out; -moz-animation-timing-function : ease-in-out; -o-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; } .ball-triangle-path > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; width : 10px; height : 10px; border-radius : 100%; border : 1px solid #55595C; } .ball-triangle-path > div:nth-of-type(1) { top : 50px; } .ball-triangle-path > div:nth-of-type(2) { right : 25px; } .ball-triangle-path > div:nth-of-type(3) { top : 50px; right : 50px; } @-webkit-keyframes ball-pulse-rise-even { 0% { -webkit-transform : scale(1.1); transform : scale(1.1); } 25% { -webkit-transform : translateY(-30px); transform : translateY(-30px); } 50% { -webkit-transform : scale(0.4); transform : scale(0.4); } 75% { -webkit-transform : translateY(30px); transform : translateY(30px); } 100% { -webkit-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes ball-pulse-rise-even { 0% { -moz-transform : scale(1.1); transform : scale(1.1); } 25% { -moz-transform : translateY(-30px); transform : translateY(-30px); } 50% { -moz-transform : scale(0.4); transform : scale(0.4); } 75% { -moz-transform : translateY(30px); transform : translateY(30px); } 100% { -moz-transform : translateY(0); transform : translateY(0); -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes ball-pulse-rise-even { 0% { -o-transform : scale(1.1); transform : scale(1.1); } 25% { -o-transform : translateY(-30px); transform : translateY(-30px); } 50% { -o-transform : scale(0.4); transform : scale(0.4); } 75% { -o-transform : translateY(30px); transform : translateY(30px); } 100% { -o-transform : translateY(0); transform : translateY(0); -o-transform : scale(1); transform : scale(1); } } @keyframes ball-pulse-rise-even { 0% { -webkit-transform : scale(1.1); -moz-transform : scale(1.1); -o-transform : scale(1.1); transform : scale(1.1); } 25% { -webkit-transform : translateY(-30px); -moz-transform : translateY(-30px); -o-transform : translateY(-30px); transform : translateY(-30px); } 50% { -webkit-transform : scale(0.4); -moz-transform : scale(0.4); -o-transform : scale(0.4); transform : scale(0.4); } 75% { -webkit-transform : translateY(30px); -moz-transform : translateY(30px); -o-transform : translateY(30px); transform : translateY(30px); } 100% { -webkit-transform : translateY(0); -moz-transform : translateY(0); -o-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } @-webkit-keyframes ball-pulse-rise-odd { 0% { -webkit-transform : scale(0.4); transform : scale(0.4); } 25% { -webkit-transform : translateY(30px); transform : translateY(30px); } 50% { -webkit-transform : scale(1.1); transform : scale(1.1); } 75% { -webkit-transform : translateY(-30px); transform : translateY(-30px); } 100% { -webkit-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(0.75); transform : scale(0.75); } } @-moz-keyframes ball-pulse-rise-odd { 0% { -moz-transform : scale(0.4); transform : scale(0.4); } 25% { -moz-transform : translateY(30px); transform : translateY(30px); } 50% { -moz-transform : scale(1.1); transform : scale(1.1); } 75% { -moz-transform : translateY(-30px); transform : translateY(-30px); } 100% { -moz-transform : translateY(0); transform : translateY(0); -moz-transform : scale(0.75); transform : scale(0.75); } } @-o-keyframes ball-pulse-rise-odd { 0% { -o-transform : scale(0.4); transform : scale(0.4); } 25% { -o-transform : translateY(30px); transform : translateY(30px); } 50% { -o-transform : scale(1.1); transform : scale(1.1); } 75% { -o-transform : translateY(-30px); transform : translateY(-30px); } 100% { -o-transform : translateY(0); transform : translateY(0); -o-transform : scale(0.75); transform : scale(0.75); } } @keyframes ball-pulse-rise-odd { 0% { -webkit-transform : scale(0.4); -moz-transform : scale(0.4); -o-transform : scale(0.4); transform : scale(0.4); } 25% { -webkit-transform : translateY(30px); -moz-transform : translateY(30px); -o-transform : translateY(30px); transform : translateY(30px); } 50% { -webkit-transform : scale(1.1); -moz-transform : scale(1.1); -o-transform : scale(1.1); transform : scale(1.1); } 75% { -webkit-transform : translateY(-30px); -moz-transform : translateY(-30px); -o-transform : translateY(-30px); transform : translateY(-30px); } 100% { -webkit-transform : translateY(0); -moz-transform : translateY(0); -o-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(0.75); -moz-transform : scale(0.75); -o-transform : scale(0.75); transform : scale(0.75); } } .ball-pulse-rise > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; -webkit-animation-duration : 1s; -moz-animation-duration : 1s; -o-animation-duration : 1s; animation-duration : 1s; -webkit-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -moz-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -o-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; } .ball-pulse-rise > div:nth-child(2n) { -webkit-animation-name : ball-pulse-rise-even; -moz-animation-name : ball-pulse-rise-even; -o-animation-name : ball-pulse-rise-even; animation-name : ball-pulse-rise-even; } .ball-pulse-rise > div:nth-child(2n-1) { -webkit-animation-name : ball-pulse-rise-odd; -moz-animation-name : ball-pulse-rise-odd; -o-animation-name : ball-pulse-rise-odd; animation-name : ball-pulse-rise-odd; } @-webkit-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @-moz-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @-o-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } .ball-grid-beat { width : 57px; } .ball-grid-beat > div:nth-child(1) { -webkit-animation-delay : 0.77s; -moz-animation-delay : 0.77s; -o-animation-delay : 0.77s; animation-delay : 0.77s; -webkit-animation-duration : 1.27s; -moz-animation-duration : 1.27s; -o-animation-duration : 1.27s; animation-duration : 1.27s; } .ball-grid-beat > div:nth-child(2) { -webkit-animation-delay : -0.18s; -moz-animation-delay : -0.18s; -o-animation-delay : -0.18s; animation-delay : -0.18s; -webkit-animation-duration : 0.78s; -moz-animation-duration : 0.78s; -o-animation-duration : 0.78s; animation-duration : 0.78s; } .ball-grid-beat > div:nth-child(3) { -webkit-animation-delay : 0.72s; -moz-animation-delay : 0.72s; -o-animation-delay : 0.72s; animation-delay : 0.72s; -webkit-animation-duration : 0.95s; -moz-animation-duration : 0.95s; -o-animation-duration : 0.95s; animation-duration : 0.95s; } .ball-grid-beat > div:nth-child(4) { -webkit-animation-delay : 0.13s; -moz-animation-delay : 0.13s; -o-animation-delay : 0.13s; animation-delay : 0.13s; -webkit-animation-duration : 0.93s; -moz-animation-duration : 0.93s; -o-animation-duration : 0.93s; animation-duration : 0.93s; } .ball-grid-beat > div:nth-child(5) { -webkit-animation-delay : 0.47s; -moz-animation-delay : 0.47s; -o-animation-delay : 0.47s; animation-delay : 0.47s; -webkit-animation-duration : 1.12s; -moz-animation-duration : 1.12s; -o-animation-duration : 1.12s; animation-duration : 1.12s; } .ball-grid-beat > div:nth-child(6) { -webkit-animation-delay : 0.65s; -moz-animation-delay : 0.65s; -o-animation-delay : 0.65s; animation-delay : 0.65s; -webkit-animation-duration : 1.16s; -moz-animation-duration : 1.16s; -o-animation-duration : 1.16s; animation-duration : 1.16s; } .ball-grid-beat > div:nth-child(7) { -webkit-animation-delay : 0.59s; -moz-animation-delay : 0.59s; -o-animation-delay : 0.59s; animation-delay : 0.59s; -webkit-animation-duration : 0.72s; -moz-animation-duration : 0.72s; -o-animation-duration : 0.72s; animation-duration : 0.72s; } .ball-grid-beat > div:nth-child(8) { -webkit-animation-delay : -0.05s; -moz-animation-delay : -0.05s; -o-animation-delay : -0.05s; animation-delay : -0.05s; -webkit-animation-duration : 1.57s; -moz-animation-duration : 1.57s; -o-animation-duration : 1.57s; animation-duration : 1.57s; } .ball-grid-beat > div:nth-child(9) { -webkit-animation-delay : 0.14s; -moz-animation-delay : 0.14s; -o-animation-delay : 0.14s; animation-delay : 0.14s; -webkit-animation-duration : 1.19s; -moz-animation-duration : 1.19s; -o-animation-duration : 1.19s; animation-duration : 1.19s; } .ball-grid-beat > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; float : right; -webkit-animation-name : ball-grid-beat; -moz-animation-name : ball-grid-beat; -o-animation-name : ball-grid-beat; animation-name : ball-grid-beat; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; } @-webkit-keyframes ball-grid-pulse { 0% { -webkit-transform : scale(1); transform : scale(1); } 50% { -webkit-transform : scale(0.5); transform : scale(0.5); opacity : 0.7; } 100% { -webkit-transform : scale(1); transform : scale(1); opacity : 1; } } @-moz-keyframes ball-grid-pulse { 0% { -moz-transform : scale(1); transform : scale(1); } 50% { -moz-transform : scale(0.5); transform : scale(0.5); opacity : 0.7; } 100% { -moz-transform : scale(1); transform : scale(1); opacity : 1; } } @-o-keyframes ball-grid-pulse { 0% { -o-transform : scale(1); transform : scale(1); } 50% { -o-transform : scale(0.5); transform : scale(0.5); opacity : 0.7; } 100% { -o-transform : scale(1); transform : scale(1); opacity : 1; } } @keyframes ball-grid-pulse { 0% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } 50% { -webkit-transform : scale(0.5); -moz-transform : scale(0.5); -o-transform : scale(0.5); transform : scale(0.5); opacity : 0.7; } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); opacity : 1; } } .ball-grid-pulse { width : 57px; } .ball-grid-pulse > div:nth-child(1) { -webkit-animation-delay : -0.11s; -moz-animation-delay : -0.11s; -o-animation-delay : -0.11s; animation-delay : -0.11s; -webkit-animation-duration : 0.7s; -moz-animation-duration : 0.7s; -o-animation-duration : 0.7s; animation-duration : 0.7s; } .ball-grid-pulse > div:nth-child(2) { -webkit-animation-delay : 0.24s; -moz-animation-delay : 0.24s; -o-animation-delay : 0.24s; animation-delay : 0.24s; -webkit-animation-duration : 1.08s; -moz-animation-duration : 1.08s; -o-animation-duration : 1.08s; animation-duration : 1.08s; } .ball-grid-pulse > div:nth-child(3) { -webkit-animation-delay : 0.18s; -moz-animation-delay : 0.18s; -o-animation-delay : 0.18s; animation-delay : 0.18s; -webkit-animation-duration : 0.65s; -moz-animation-duration : 0.65s; -o-animation-duration : 0.65s; animation-duration : 0.65s; } .ball-grid-pulse > div:nth-child(4) { -webkit-animation-delay : 0.68s; -moz-animation-delay : 0.68s; -o-animation-delay : 0.68s; animation-delay : 0.68s; -webkit-animation-duration : 0.79s; -moz-animation-duration : 0.79s; -o-animation-duration : 0.79s; animation-duration : 0.79s; } .ball-grid-pulse > div:nth-child(5) { -webkit-animation-delay : 0.37s; -moz-animation-delay : 0.37s; -o-animation-delay : 0.37s; animation-delay : 0.37s; -webkit-animation-duration : 0.85s; -moz-animation-duration : 0.85s; -o-animation-duration : 0.85s; animation-duration : 0.85s; } .ball-grid-pulse > div:nth-child(6) { -webkit-animation-delay : 0.73s; -moz-animation-delay : 0.73s; -o-animation-delay : 0.73s; animation-delay : 0.73s; -webkit-animation-duration : 1.17s; -moz-animation-duration : 1.17s; -o-animation-duration : 1.17s; animation-duration : 1.17s; } .ball-grid-pulse > div:nth-child(7) { -webkit-animation-delay : 0.73s; -moz-animation-delay : 0.73s; -o-animation-delay : 0.73s; animation-delay : 0.73s; -webkit-animation-duration : 1.09s; -moz-animation-duration : 1.09s; -o-animation-duration : 1.09s; animation-duration : 1.09s; } .ball-grid-pulse > div:nth-child(8) { -webkit-animation-delay : 0.07s; -moz-animation-delay : 0.07s; -o-animation-delay : 0.07s; animation-delay : 0.07s; -webkit-animation-duration : 1.52s; -moz-animation-duration : 1.52s; -o-animation-duration : 1.52s; animation-duration : 1.52s; } .ball-grid-pulse > div:nth-child(9) { -webkit-animation-delay : 0.73s; -moz-animation-delay : 0.73s; -o-animation-delay : 0.73s; animation-delay : 0.73s; -webkit-animation-duration : 1.25s; -moz-animation-duration : 1.25s; -o-animation-duration : 1.25s; animation-duration : 1.25s; } .ball-grid-pulse > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; float : right; -webkit-animation-name : ball-grid-pulse; -moz-animation-name : ball-grid-pulse; -o-animation-name : ball-grid-pulse; animation-name : ball-grid-pulse; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; } @-webkit-keyframes ball-spin-fade-loader { 50% { opacity : 0.3; -webkit-transform : scale(0.4); transform : scale(0.4); } 100% { opacity : 1; -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes ball-spin-fade-loader { 50% { opacity : 0.3; -moz-transform : scale(0.4); transform : scale(0.4); } 100% { opacity : 1; -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes ball-spin-fade-loader { 50% { opacity : 0.3; -o-transform : scale(0.4); transform : scale(0.4); } 100% { opacity : 1; -o-transform : scale(1); transform : scale(1); } } @keyframes ball-spin-fade-loader { 50% { opacity : 0.3; -webkit-transform : scale(0.4); -moz-transform : scale(0.4); -o-transform : scale(0.4); transform : scale(0.4); } 100% { opacity : 1; -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } .ball-spin-fade-loader { position : relative; top : -10px; right : -10px; } .ball-spin-fade-loader > div:nth-child(1) { top : 25px; right : 0; -webkit-animation : ball-spin-fade-loader 1s -0.96s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.96s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.96s infinite linear; animation : ball-spin-fade-loader 1s -0.96s infinite linear; } .ball-spin-fade-loader > div:nth-child(2) { top : 17.04545px; right : 17.04545px; -webkit-animation : ball-spin-fade-loader 1s -0.84s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.84s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.84s infinite linear; animation : ball-spin-fade-loader 1s -0.84s infinite linear; } .ball-spin-fade-loader > div:nth-child(3) { top : 0; right : 25px; -webkit-animation : ball-spin-fade-loader 1s -0.72s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.72s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.72s infinite linear; animation : ball-spin-fade-loader 1s -0.72s infinite linear; } .ball-spin-fade-loader > div:nth-child(4) { top : -17.04545px; right : 17.04545px; -webkit-animation : ball-spin-fade-loader 1s -0.6s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.6s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.6s infinite linear; animation : ball-spin-fade-loader 1s -0.6s infinite linear; } .ball-spin-fade-loader > div:nth-child(5) { top : -25px; right : 0; -webkit-animation : ball-spin-fade-loader 1s -0.48s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.48s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.48s infinite linear; animation : ball-spin-fade-loader 1s -0.48s infinite linear; } .ball-spin-fade-loader > div:nth-child(6) { top : -17.04545px; right : -17.04545px; -webkit-animation : ball-spin-fade-loader 1s -0.36s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.36s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.36s infinite linear; animation : ball-spin-fade-loader 1s -0.36s infinite linear; } .ball-spin-fade-loader > div:nth-child(7) { top : 0; right : -25px; -webkit-animation : ball-spin-fade-loader 1s -0.24s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.24s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.24s infinite linear; animation : ball-spin-fade-loader 1s -0.24s infinite linear; } .ball-spin-fade-loader > div:nth-child(8) { top : 17.04545px; right : -17.04545px; -webkit-animation : ball-spin-fade-loader 1s -0.12s infinite linear; -moz-animation : ball-spin-fade-loader 1s -0.12s infinite linear; -o-animation : ball-spin-fade-loader 1s -0.12s infinite linear; animation : ball-spin-fade-loader 1s -0.12s infinite linear; } .ball-spin-fade-loader > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; } @-webkit-keyframes ball-spin-loader { 75% { opacity : 0.2; } 100% { opacity : 1; } } @-moz-keyframes ball-spin-loader { 75% { opacity : 0.2; } 100% { opacity : 1; } } @-o-keyframes ball-spin-loader { 75% { opacity : 0.2; } 100% { opacity : 1; } } @keyframes ball-spin-loader { 75% { opacity : 0.2; } 100% { opacity : 1; } } .ball-spin-loader { position : relative; } .ball-spin-loader > span:nth-child(1) { top : 45px; right : 0; -webkit-animation : ball-spin-loader 2s 0.9s infinite linear; -moz-animation : ball-spin-loader 2s 0.9s infinite linear; -o-animation : ball-spin-loader 2s 0.9s infinite linear; animation : ball-spin-loader 2s 0.9s infinite linear; } .ball-spin-loader > span:nth-child(2) { top : 30.68182px; right : 30.68182px; -webkit-animation : ball-spin-loader 2s 1.8s infinite linear; -moz-animation : ball-spin-loader 2s 1.8s infinite linear; -o-animation : ball-spin-loader 2s 1.8s infinite linear; animation : ball-spin-loader 2s 1.8s infinite linear; } .ball-spin-loader > span:nth-child(3) { top : 0; right : 45px; -webkit-animation : ball-spin-loader 2s 2.7s infinite linear; -moz-animation : ball-spin-loader 2s 2.7s infinite linear; -o-animation : ball-spin-loader 2s 2.7s infinite linear; animation : ball-spin-loader 2s 2.7s infinite linear; } .ball-spin-loader > span:nth-child(4) { top : -30.68182px; right : 30.68182px; -webkit-animation : ball-spin-loader 2s 3.6s infinite linear; -moz-animation : ball-spin-loader 2s 3.6s infinite linear; -o-animation : ball-spin-loader 2s 3.6s infinite linear; animation : ball-spin-loader 2s 3.6s infinite linear; } .ball-spin-loader > span:nth-child(5) { top : -45px; right : 0; -webkit-animation : ball-spin-loader 2s 4.5s infinite linear; -moz-animation : ball-spin-loader 2s 4.5s infinite linear; -o-animation : ball-spin-loader 2s 4.5s infinite linear; animation : ball-spin-loader 2s 4.5s infinite linear; } .ball-spin-loader > span:nth-child(6) { top : -30.68182px; right : -30.68182px; -webkit-animation : ball-spin-loader 2s 5.4s infinite linear; -moz-animation : ball-spin-loader 2s 5.4s infinite linear; -o-animation : ball-spin-loader 2s 5.4s infinite linear; animation : ball-spin-loader 2s 5.4s infinite linear; } .ball-spin-loader > span:nth-child(7) { top : 0; right : -45px; -webkit-animation : ball-spin-loader 2s 6.3s infinite linear; -moz-animation : ball-spin-loader 2s 6.3s infinite linear; -o-animation : ball-spin-loader 2s 6.3s infinite linear; animation : ball-spin-loader 2s 6.3s infinite linear; } .ball-spin-loader > span:nth-child(8) { top : 30.68182px; right : -30.68182px; -webkit-animation : ball-spin-loader 2s 7.2s infinite linear; -moz-animation : ball-spin-loader 2s 7.2s infinite linear; -o-animation : ball-spin-loader 2s 7.2s infinite linear; animation : ball-spin-loader 2s 7.2s infinite linear; } .ball-spin-loader > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; width : 15px; height : 15px; border-radius : 100%; background : green; } @-webkit-keyframes ball-zig { 33% { -webkit-transform : translate(15px, -30px); transform : translate(15px, -30px); } 66% { -webkit-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 100% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } } @-moz-keyframes ball-zig { 33% { -moz-transform : translate(15px, -30px); transform : translate(15px, -30px); } 66% { -moz-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 100% { -moz-transform : translate(0, 0); transform : translate(0, 0); } } @-o-keyframes ball-zig { 33% { -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 66% { -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 100% { -o-transform : translate(0, 0); transform : translate(0, 0); } } @keyframes ball-zig { 33% { -webkit-transform : translate(15px, -30px); -moz-transform : translate(15px, -30px); -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 66% { -webkit-transform : translate(-15px, -30px); -moz-transform : translate(-15px, -30px); -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 100% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } } @-webkit-keyframes ball-zag { 33% { -webkit-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 66% { -webkit-transform : translate(15px, 30px); transform : translate(15px, 30px); } 100% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } } @-moz-keyframes ball-zag { 33% { -moz-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 66% { -moz-transform : translate(15px, 30px); transform : translate(15px, 30px); } 100% { -moz-transform : translate(0, 0); transform : translate(0, 0); } } @-o-keyframes ball-zag { 33% { -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 66% { -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 100% { -o-transform : translate(0, 0); transform : translate(0, 0); } } @keyframes ball-zag { 33% { -webkit-transform : translate(-15px, 30px); -moz-transform : translate(-15px, 30px); -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 66% { -webkit-transform : translate(15px, 30px); -moz-transform : translate(15px, 30px); -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 100% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } } .ball-zig-zag { position : relative; -webkit-transform : translate(15px, -15px); -moz-transform : translate(15px, -15px); -ms-transform : translate(15px, -15px); -o-transform : translate(15px, -15px); transform : translate(15px, -15px); } .ball-zig-zag > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; margin-right : 15px; top : 4px; right : -7px; } .ball-zig-zag > div:first-child { -webkit-animation : ball-zig 0.7s 0s infinite linear; -moz-animation : ball-zig 0.7s 0s infinite linear; -o-animation : ball-zig 0.7s 0s infinite linear; animation : ball-zig 0.7s 0s infinite linear; } .ball-zig-zag > div:last-child { -webkit-animation : ball-zag 0.7s 0s infinite linear; -moz-animation : ball-zag 0.7s 0s infinite linear; -o-animation : ball-zag 0.7s 0s infinite linear; animation : ball-zag 0.7s 0s infinite linear; } @-webkit-keyframes ball-zig-deflect { 17% { -webkit-transform : translate(15px, -30px); transform : translate(15px, -30px); } 34% { -webkit-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 50% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } 67% { -webkit-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 84% { -webkit-transform : translate(15px, -30px); transform : translate(15px, -30px); } 100% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } } @-moz-keyframes ball-zig-deflect { 17% { -moz-transform : translate(15px, -30px); transform : translate(15px, -30px); } 34% { -moz-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 50% { -moz-transform : translate(0, 0); transform : translate(0, 0); } 67% { -moz-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 84% { -moz-transform : translate(15px, -30px); transform : translate(15px, -30px); } 100% { -moz-transform : translate(0, 0); transform : translate(0, 0); } } @-o-keyframes ball-zig-deflect { 17% { -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 34% { -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 50% { -o-transform : translate(0, 0); transform : translate(0, 0); } 67% { -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 84% { -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 100% { -o-transform : translate(0, 0); transform : translate(0, 0); } } @keyframes ball-zig-deflect { 17% { -webkit-transform : translate(15px, -30px); -moz-transform : translate(15px, -30px); -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 34% { -webkit-transform : translate(-15px, -30px); -moz-transform : translate(-15px, -30px); -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 50% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } 67% { -webkit-transform : translate(-15px, -30px); -moz-transform : translate(-15px, -30px); -o-transform : translate(-15px, -30px); transform : translate(-15px, -30px); } 84% { -webkit-transform : translate(15px, -30px); -moz-transform : translate(15px, -30px); -o-transform : translate(15px, -30px); transform : translate(15px, -30px); } 100% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } } @-webkit-keyframes ball-zag-deflect { 17% { -webkit-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 34% { -webkit-transform : translate(15px, 30px); transform : translate(15px, 30px); } 50% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } 67% { -webkit-transform : translate(15px, 30px); transform : translate(15px, 30px); } 84% { -webkit-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 100% { -webkit-transform : translate(0, 0); transform : translate(0, 0); } } @-moz-keyframes ball-zag-deflect { 17% { -moz-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 34% { -moz-transform : translate(15px, 30px); transform : translate(15px, 30px); } 50% { -moz-transform : translate(0, 0); transform : translate(0, 0); } 67% { -moz-transform : translate(15px, 30px); transform : translate(15px, 30px); } 84% { -moz-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 100% { -moz-transform : translate(0, 0); transform : translate(0, 0); } } @-o-keyframes ball-zag-deflect { 17% { -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 34% { -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 50% { -o-transform : translate(0, 0); transform : translate(0, 0); } 67% { -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 84% { -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 100% { -o-transform : translate(0, 0); transform : translate(0, 0); } } @keyframes ball-zag-deflect { 17% { -webkit-transform : translate(-15px, 30px); -moz-transform : translate(-15px, 30px); -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 34% { -webkit-transform : translate(15px, 30px); -moz-transform : translate(15px, 30px); -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 50% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } 67% { -webkit-transform : translate(15px, 30px); -moz-transform : translate(15px, 30px); -o-transform : translate(15px, 30px); transform : translate(15px, 30px); } 84% { -webkit-transform : translate(-15px, 30px); -moz-transform : translate(-15px, 30px); -o-transform : translate(-15px, 30px); transform : translate(-15px, 30px); } 100% { -webkit-transform : translate(0, 0); -moz-transform : translate(0, 0); -o-transform : translate(0, 0); transform : translate(0, 0); } } .ball-zig-zag-deflect { position : relative; -webkit-transform : translate(15px, -15px); -moz-transform : translate(15px, -15px); -ms-transform : translate(15px, -15px); -o-transform : translate(15px, -15px); transform : translate(15px, -15px); } .ball-zig-zag-deflect > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; margin-right : 15px; top : 4px; right : -7px; } .ball-zig-zag-deflect > div:first-child { -webkit-animation : ball-zig-deflect 1.5s 0s infinite linear; -moz-animation : ball-zig-deflect 1.5s 0s infinite linear; -o-animation : ball-zig-deflect 1.5s 0s infinite linear; animation : ball-zig-deflect 1.5s 0s infinite linear; } .ball-zig-zag-deflect > div:last-child { -webkit-animation : ball-zag-deflect 1.5s 0s infinite linear; -moz-animation : ball-zag-deflect 1.5s 0s infinite linear; -o-animation : ball-zag-deflect 1.5s 0s infinite linear; animation : ball-zag-deflect 1.5s 0s infinite linear; } /** * Lines */ @-webkit-keyframes line-scale { 0% { -webkit-transform : scaley(1); transform : scaley(1); } 50% { -webkit-transform : scaley(0.4); transform : scaley(0.4); } 100% { -webkit-transform : scaley(1); transform : scaley(1); } } @-moz-keyframes line-scale { 0% { -moz-transform : scaley(1); transform : scaley(1); } 50% { -moz-transform : scaley(0.4); transform : scaley(0.4); } 100% { -moz-transform : scaley(1); transform : scaley(1); } } @-o-keyframes line-scale { 0% { -o-transform : scaley(1); transform : scaley(1); } 50% { -o-transform : scaley(0.4); transform : scaley(0.4); } 100% { -o-transform : scaley(1); transform : scaley(1); } } @keyframes line-scale { 0% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } 50% { -webkit-transform : scaley(0.4); -moz-transform : scaley(0.4); -o-transform : scaley(0.4); transform : scaley(0.4); } 100% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } } .line-scale > div:nth-child(1) { -webkit-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .line-scale > div:nth-child(2) { -webkit-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .line-scale > div:nth-child(3) { -webkit-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .line-scale > div:nth-child(4) { -webkit-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .line-scale > div:nth-child(5) { -webkit-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -moz-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); -o-animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); animation : line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .line-scale > div { background-color : #55595C; width : 4px; height : 3.45rem; border-radius : 2px; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; } @-webkit-keyframes line-scale-party { 0% { -webkit-transform : scale(1); transform : scale(1); } 50% { -webkit-transform : scale(0.5); transform : scale(0.5); } 100% { -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes line-scale-party { 0% { -moz-transform : scale(1); transform : scale(1); } 50% { -moz-transform : scale(0.5); transform : scale(0.5); } 100% { -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes line-scale-party { 0% { -o-transform : scale(1); transform : scale(1); } 50% { -o-transform : scale(0.5); transform : scale(0.5); } 100% { -o-transform : scale(1); transform : scale(1); } } @keyframes line-scale-party { 0% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } 50% { -webkit-transform : scale(0.5); -moz-transform : scale(0.5); -o-transform : scale(0.5); transform : scale(0.5); } 100% { -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } .line-scale-party > div:nth-child(1) { -webkit-animation-delay : 0.61s; -moz-animation-delay : 0.61s; -o-animation-delay : 0.61s; animation-delay : 0.61s; -webkit-animation-duration : 1.27s; -moz-animation-duration : 1.27s; -o-animation-duration : 1.27s; animation-duration : 1.27s; } .line-scale-party > div:nth-child(2) { -webkit-animation-delay : -0.15s; -moz-animation-delay : -0.15s; -o-animation-delay : -0.15s; animation-delay : -0.15s; -webkit-animation-duration : 0.84s; -moz-animation-duration : 0.84s; -o-animation-duration : 0.84s; animation-duration : 0.84s; } .line-scale-party > div:nth-child(3) { -webkit-animation-delay : -0.13s; -moz-animation-delay : -0.13s; -o-animation-delay : -0.13s; animation-delay : -0.13s; -webkit-animation-duration : 0.65s; -moz-animation-duration : 0.65s; -o-animation-duration : 0.65s; animation-duration : 0.65s; } .line-scale-party > div:nth-child(4) { -webkit-animation-delay : 0.33s; -moz-animation-delay : 0.33s; -o-animation-delay : 0.33s; animation-delay : 0.33s; -webkit-animation-duration : 0.72s; -moz-animation-duration : 0.72s; -o-animation-duration : 0.72s; animation-duration : 0.72s; } .line-scale-party > div { background-color : #55595C; width : 4px; height : 3.45rem; border-radius : 2px; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; -webkit-animation-name : line-scale-party; -moz-animation-name : line-scale-party; -o-animation-name : line-scale-party; animation-name : line-scale-party; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; } @-webkit-keyframes line-scale-pulse-out { 0% { -webkit-transform : scaley(1); transform : scaley(1); } 50% { -webkit-transform : scaley(0.4); transform : scaley(0.4); } 100% { -webkit-transform : scaley(1); transform : scaley(1); } } @-moz-keyframes line-scale-pulse-out { 0% { -moz-transform : scaley(1); transform : scaley(1); } 50% { -moz-transform : scaley(0.4); transform : scaley(0.4); } 100% { -moz-transform : scaley(1); transform : scaley(1); } } @-o-keyframes line-scale-pulse-out { 0% { -o-transform : scaley(1); transform : scaley(1); } 50% { -o-transform : scaley(0.4); transform : scaley(0.4); } 100% { -o-transform : scaley(1); transform : scaley(1); } } @keyframes line-scale-pulse-out { 0% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } 50% { -webkit-transform : scaley(0.4); -moz-transform : scaley(0.4); -o-transform : scaley(0.4); transform : scaley(0.4); } 100% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } } .line-scale-pulse-out > div { background-color : #55595C; width : 4px; height : 3.45rem; border-radius : 2px; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; -webkit-animation : line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); -moz-animation : line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); -o-animation : line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); animation : line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); } .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) { -webkit-animation-delay : -0.4s !important; -moz-animation-delay : -0.4s !important; -o-animation-delay : -0.4s !important; animation-delay : -0.4s !important; } .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) { -webkit-animation-delay : -0.2s !important; -moz-animation-delay : -0.2s !important; -o-animation-delay : -0.2s !important; animation-delay : -0.2s !important; } @-webkit-keyframes line-scale-pulse-out-rapid { 0% { -webkit-transform : scaley(1); transform : scaley(1); } 80% { -webkit-transform : scaley(0.3); transform : scaley(0.3); } 90% { -webkit-transform : scaley(1); transform : scaley(1); } } @-moz-keyframes line-scale-pulse-out-rapid { 0% { -moz-transform : scaley(1); transform : scaley(1); } 80% { -moz-transform : scaley(0.3); transform : scaley(0.3); } 90% { -moz-transform : scaley(1); transform : scaley(1); } } @-o-keyframes line-scale-pulse-out-rapid { 0% { -o-transform : scaley(1); transform : scaley(1); } 80% { -o-transform : scaley(0.3); transform : scaley(0.3); } 90% { -o-transform : scaley(1); transform : scaley(1); } } @keyframes line-scale-pulse-out-rapid { 0% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } 80% { -webkit-transform : scaley(0.3); -moz-transform : scaley(0.3); -o-transform : scaley(0.3); transform : scaley(0.3); } 90% { -webkit-transform : scaley(1); -moz-transform : scaley(1); -o-transform : scaley(1); transform : scaley(1); } } .line-scale-pulse-out-rapid > div { background-color : #55595C; width : 4px; height : 3.45rem; border-radius : 2px; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; vertical-align : middle; -webkit-animation : line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); -moz-animation : line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); -o-animation : line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); animation : line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); } .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) { -webkit-animation-delay : -0.25s !important; -moz-animation-delay : -0.25s !important; -o-animation-delay : -0.25s !important; animation-delay : -0.25s !important; } .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) { -webkit-animation-delay : 0s !important; -moz-animation-delay : 0s !important; -o-animation-delay : 0s !important; animation-delay : 0s !important; } @-webkit-keyframes line-spin-fade-loader { 50% { opacity : 0.3; } 100% { opacity : 1; } } @-moz-keyframes line-spin-fade-loader { 50% { opacity : 0.3; } 100% { opacity : 1; } } @-o-keyframes line-spin-fade-loader { 50% { opacity : 0.3; } 100% { opacity : 1; } } @keyframes line-spin-fade-loader { 50% { opacity : 0.3; } 100% { opacity : 1; } } .line-spin-fade-loader { position : relative; top : -10px; right : -4px; } .line-spin-fade-loader > div:nth-child(1) { top : 20px; right : 0; -webkit-animation : line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(2) { top : 13.63636px; right : 13.63636px; -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); -webkit-animation : line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(3) { top : 0; right : 20px; -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -ms-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); -webkit-animation : line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(4) { top : -13.63636px; right : 13.63636px; -webkit-transform : rotate(-45deg); -moz-transform : rotate(-45deg); -ms-transform : rotate(-45deg); -o-transform : rotate(-45deg); transform : rotate(-45deg); -webkit-animation : line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(5) { top : -20px; right : 0; -webkit-animation : line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(6) { top : -13.63636px; right : -13.63636px; -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); -webkit-animation : line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(7) { top : 0; right : -20px; -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -ms-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); -webkit-animation : line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; animation : line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; } .line-spin-fade-loader > div:nth-child(8) { top : 13.63636px; right : -13.63636px; -webkit-transform : rotate(-45deg); -moz-transform : rotate(-45deg); -ms-transform : rotate(-45deg); -o-transform : rotate(-45deg); transform : rotate(-45deg); -webkit-animation : line-spin-fade-loader 1.2s 0s infinite ease-in-out; -moz-animation : line-spin-fade-loader 1.2s 0s infinite ease-in-out; -o-animation : line-spin-fade-loader 1.2s 0s infinite ease-in-out; animation : line-spin-fade-loader 1.2s 0s infinite ease-in-out; } .line-spin-fade-loader > div { background-color : #55595C; width : 4px; height : 3.45rem; border-radius : 2px; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; position : absolute; width : 5px; height : 15px; } /** * Misc */ @-webkit-keyframes triangle-skew-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-moz-keyframes triangle-skew-spin { 25% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-o-keyframes triangle-skew-spin { 25% { transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { transform : perspective(100px) rotateX(0) rotateY(0); } } @keyframes triangle-skew-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } .triangle-skew-spin > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; width : 0; height : 0; border-right : 20px solid transparent; border-left : 20px solid transparent; border-bottom : 20px solid #55595C; -webkit-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } @-webkit-keyframes square-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-moz-keyframes square-spin { 25% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-o-keyframes square-spin { 25% { transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { transform : perspective(100px) rotateX(0) rotateY(0); } } @keyframes square-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } .square-spin > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; width : 50px; height : 50px; background : #55595C; -webkit-animation : square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation : square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation : square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } @-webkit-keyframes rotate_pacman_half_up { 0% { -webkit-transform : rotate(-270deg); transform : rotate(-270deg); } 50% { -webkit-transform : rotate(-360deg); transform : rotate(-360deg); } 100% { -webkit-transform : rotate(-270deg); transform : rotate(-270deg); } } @-moz-keyframes rotate_pacman_half_up { 0% { -moz-transform : rotate(-270deg); transform : rotate(-270deg); } 50% { -moz-transform : rotate(-360deg); transform : rotate(-360deg); } 100% { -moz-transform : rotate(-270deg); transform : rotate(-270deg); } } @-o-keyframes rotate_pacman_half_up { 0% { -o-transform : rotate(-270deg); transform : rotate(-270deg); } 50% { -o-transform : rotate(-360deg); transform : rotate(-360deg); } 100% { -o-transform : rotate(-270deg); transform : rotate(-270deg); } } @keyframes rotate_pacman_half_up { 0% { -webkit-transform : rotate(-270deg); -moz-transform : rotate(-270deg); -o-transform : rotate(-270deg); transform : rotate(-270deg); } 50% { -webkit-transform : rotate(-360deg); -moz-transform : rotate(-360deg); -o-transform : rotate(-360deg); transform : rotate(-360deg); } 100% { -webkit-transform : rotate(-270deg); -moz-transform : rotate(-270deg); -o-transform : rotate(-270deg); transform : rotate(-270deg); } } @-webkit-keyframes rotate_pacman_half_down { 0% { -webkit-transform : rotate(-90deg); transform : rotate(-90deg); } 50% { -webkit-transform : rotate(0deg); transform : rotate(0deg); } 100% { -webkit-transform : rotate(-90deg); transform : rotate(-90deg); } } @-moz-keyframes rotate_pacman_half_down { 0% { -moz-transform : rotate(-90deg); transform : rotate(-90deg); } 50% { -moz-transform : rotate(0deg); transform : rotate(0deg); } 100% { -moz-transform : rotate(-90deg); transform : rotate(-90deg); } } @-o-keyframes rotate_pacman_half_down { 0% { -o-transform : rotate(-90deg); transform : rotate(-90deg); } 50% { -o-transform : rotate(0deg); transform : rotate(0deg); } 100% { -o-transform : rotate(-90deg); transform : rotate(-90deg); } } @keyframes rotate_pacman_half_down { 0% { -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); } 50% { -webkit-transform : rotate(0deg); -moz-transform : rotate(0deg); -o-transform : rotate(0deg); transform : rotate(0deg); } 100% { -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); } } @-webkit-keyframes pacman-balls { 75% { opacity : 0.7; } 100% { -webkit-transform : translate(100px, -6.25px); transform : translate(100px, -6.25px); } } @-moz-keyframes pacman-balls { 75% { opacity : 0.7; } 100% { -moz-transform : translate(100px, -6.25px); transform : translate(100px, -6.25px); } } @-o-keyframes pacman-balls { 75% { opacity : 0.7; } 100% { -o-transform : translate(100px, -6.25px); transform : translate(100px, -6.25px); } } @keyframes pacman-balls { 75% { opacity : 0.7; } 100% { -webkit-transform : translate(100px, -6.25px); -moz-transform : translate(100px, -6.25px); -o-transform : translate(100px, -6.25px); transform : translate(100px, -6.25px); } } .pacman { position : relative; } .pacman > div:nth-child(2) { -webkit-animation : pacman-balls 1s -0.99s infinite linear; -moz-animation : pacman-balls 1s -0.99s infinite linear; -o-animation : pacman-balls 1s -0.99s infinite linear; animation : pacman-balls 1s -0.99s infinite linear; } .pacman > div:nth-child(3) { -webkit-animation : pacman-balls 1s -0.66s infinite linear; -moz-animation : pacman-balls 1s -0.66s infinite linear; -o-animation : pacman-balls 1s -0.66s infinite linear; animation : pacman-balls 1s -0.66s infinite linear; } .pacman > div:nth-child(4) { -webkit-animation : pacman-balls 1s -0.33s infinite linear; -moz-animation : pacman-balls 1s -0.33s infinite linear; -o-animation : pacman-balls 1s -0.33s infinite linear; animation : pacman-balls 1s -0.33s infinite linear; } .pacman > div:nth-child(5) { -webkit-animation : pacman-balls 1s 0s infinite linear; -moz-animation : pacman-balls 1s 0s infinite linear; -o-animation : pacman-balls 1s 0s infinite linear; animation : pacman-balls 1s 0s infinite linear; } .pacman > div:first-of-type { width : 0; height : 0; border-left : 25px solid transparent; border-top : 25px solid #55595C; border-right : 25px solid #55595C; border-bottom : 25px solid #55595C; border-radius : 25px; -webkit-animation : rotate_pacman_half_up 0.5s 0s infinite; -moz-animation : rotate_pacman_half_up 0.5s 0s infinite; -o-animation : rotate_pacman_half_up 0.5s 0s infinite; animation : rotate_pacman_half_up 0.5s 0s infinite; position : relative; right : -30px; } .pacman > div:nth-child(2) { width : 0; height : 0; border-left : 25px solid transparent; border-top : 25px solid #55595C; border-right : 25px solid #55595C; border-bottom : 25px solid #55595C; border-radius : 25px; -webkit-animation : rotate_pacman_half_down 0.5s 0s infinite; -moz-animation : rotate_pacman_half_down 0.5s 0s infinite; -o-animation : rotate_pacman_half_down 0.5s 0s infinite; animation : rotate_pacman_half_down 0.5s 0s infinite; margin-top : -50px; position : relative; right : -30px; } .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; width : 10px; height : 10px; position : absolute; -webkit-transform : translate(0, -6.25px); -moz-transform : translate(0, -6.25px); -ms-transform : translate(0, -6.25px); -o-transform : translate(0, -6.25px); transform : translate(0, -6.25px); top : 25px; right : 70px; } @-webkit-keyframes cube-transition { 25% { -webkit-transform : translateX(-50px) scale(0.5) rotate(90deg); transform : translateX(-50px) scale(0.5) rotate(90deg); } 50% { -webkit-transform : translate(-50px, 50px) rotate(180deg); transform : translate(-50px, 50px) rotate(180deg); } 75% { -webkit-transform : translateY(50px) scale(0.5) rotate(270deg); transform : translateY(50px) scale(0.5) rotate(270deg); } 100% { -webkit-transform : rotate(360deg); transform : rotate(360deg); } } @-moz-keyframes cube-transition { 25% { -moz-transform : translateX(-50px) scale(0.5) rotate(90deg); transform : translateX(-50px) scale(0.5) rotate(90deg); } 50% { -moz-transform : translate(-50px, 50px) rotate(180deg); transform : translate(-50px, 50px) rotate(180deg); } 75% { -moz-transform : translateY(50px) scale(0.5) rotate(270deg); transform : translateY(50px) scale(0.5) rotate(270deg); } 100% { -moz-transform : rotate(360deg); transform : rotate(360deg); } } @-o-keyframes cube-transition { 25% { -o-transform : translateX(-50px) scale(0.5) rotate(90deg); transform : translateX(-50px) scale(0.5) rotate(90deg); } 50% { -o-transform : translate(-50px, 50px) rotate(180deg); transform : translate(-50px, 50px) rotate(180deg); } 75% { -o-transform : translateY(50px) scale(0.5) rotate(270deg); transform : translateY(50px) scale(0.5) rotate(270deg); } 100% { -o-transform : rotate(360deg); transform : rotate(360deg); } } @keyframes cube-transition { 25% { -webkit-transform : translateX(-50px) scale(0.5) rotate(90deg); -moz-transform : translateX(-50px) scale(0.5) rotate(90deg); -o-transform : translateX(-50px) scale(0.5) rotate(90deg); transform : translateX(-50px) scale(0.5) rotate(90deg); } 50% { -webkit-transform : translate(-50px, 50px) rotate(180deg); -moz-transform : translate(-50px, 50px) rotate(180deg); -o-transform : translate(-50px, 50px) rotate(180deg); transform : translate(-50px, 50px) rotate(180deg); } 75% { -webkit-transform : translateY(50px) scale(0.5) rotate(270deg); -moz-transform : translateY(50px) scale(0.5) rotate(270deg); -o-transform : translateY(50px) scale(0.5) rotate(270deg); transform : translateY(50px) scale(0.5) rotate(270deg); } 100% { -webkit-transform : rotate(360deg); -moz-transform : rotate(360deg); -o-transform : rotate(360deg); transform : rotate(360deg); } } .cube-transition { position : relative; -webkit-transform : translate(25px, -25px); -moz-transform : translate(25px, -25px); -ms-transform : translate(25px, -25px); -o-transform : translate(25px, -25px); transform : translate(25px, -25px); } .cube-transition > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; width : 10px; height : 10px; position : absolute; top : -5px; right : -5px; background-color : #55595C; -webkit-animation : cube-transition 1.6s 0s infinite ease-in-out; -moz-animation : cube-transition 1.6s 0s infinite ease-in-out; -o-animation : cube-transition 1.6s 0s infinite ease-in-out; animation : cube-transition 1.6s 0s infinite ease-in-out; } .cube-transition > div:last-child { -webkit-animation-delay : -0.8s; -moz-animation-delay : -0.8s; -o-animation-delay : -0.8s; animation-delay : -0.8s; } @-webkit-keyframes spin-rotate { 0% { -webkit-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); transform : rotate(-360deg); } } @-moz-keyframes spin-rotate { 0% { -moz-transform : rotate(0deg); transform : rotate(0deg); } 50% { -moz-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -moz-transform : rotate(-360deg); transform : rotate(-360deg); } } @-o-keyframes spin-rotate { 0% { -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -o-transform : rotate(-360deg); transform : rotate(-360deg); } } @keyframes spin-rotate { 0% { -webkit-transform : rotate(0deg); -moz-transform : rotate(0deg); -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); -moz-transform : rotate(-180deg); -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); -moz-transform : rotate(-360deg); -o-transform : rotate(-360deg); transform : rotate(-360deg); } } .semi-circle-spin { position : relative; width : 35px; height : 35px; overflow : hidden; } .semi-circle-spin > div { position : absolute; border-width : 0; border-radius : 100%; -webkit-animation : spin-rotate 0.6s 0s infinite linear; -moz-animation : spin-rotate 0.6s 0s infinite linear; -o-animation : spin-rotate 0.6s 0s infinite linear; animation : spin-rotate 0.6s 0s infinite linear; background-image : -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #55595C), to(#55595C)); background-image : -webkit-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : -moz-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : -o-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); width : 100%; height : 100%; } .loader-wrapper { position : relative; } .loader-container { margin : 0; position : absolute; top : 50%; right : 50%; margin-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%); } #preloader-wrapper { position : fixed; top : 0; right : 0; width : 100%; height : 100%; z-index : 1050; } #preloader-wrapper .loader-section { position : fixed; width : 100%; height : 51%; background : #222222; z-index : 1050; } #preloader-wrapper .loader-section.section-top { top : 0; } #preloader-wrapper .loader-section.section-bottom { bottom : 0; } #loader { display : block; position : absolute; right : 50%; top : 50%; width : 60px; height : 60px; margin-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%); z-index : 1051; /* anything higher than z-index: 1000 of .loader-section */ } /* Loaded */ .loaded #preloader-wrapper .loader-section.section-top { -webkit-transform : translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform : translateY(-100%); /* IE 9 */ -moz-transform : translateY(-100%); -o-transform : translateY(-100%); transform : translateY(-100%); /* Firefox 16+, IE 10+, Opera */ } .loaded #preloader-wrapper .loader-section.section-bottom { -webkit-transform : translateY(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform : translateY(100%); /* IE 9 */ -moz-transform : translateY(100%); -o-transform : translateY(100%); transform : translateY(100%); /* Firefox 16+, IE 10+, Opera */ } .loaded #loader { opacity : 0; } .loaded #preloader-wrapper { visibility : hidden; } .loaded #loader { opacity : 0; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .loaded #preloader-wrapper .loader-section.section-bottom, .loaded #preloader-wrapper .loader-section.section-top { -webkit-transition : all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition : all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition : all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition : all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }