/* Table of Contents ================================================== #Spinner */ /* #Spinner ================================================== */ .spinner-backdrop { background: rgba(71,74,84,0.8); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 1040; } .spinner { -webkit-animation-fill-mode: both; animation-fill-mode: both; margin: 15% auto 0 auto; position: relative; text-align: center; } @-webkit-keyframes spinnerBeat { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 28% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 70% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes spinnerBeat { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 28% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 70% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .spinner-beat { -webkit-animation: spinnerBeat 1.3s infinite ease-in-out; animation: spinnerBeat 1.3s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); -moz-box-sizing: border-box; box-sizing: border-box; height: 50px; width: 50px; } @-webkit-keyframes spinnerCircle { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0); } } @keyframes spinnerCircle { 0%, 80%, 100% { -webkit-transform: scale(0.0); -ms-transform: scale(0.0); transform: scale(0.0); } 40% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .spinner-circle { height: 60px; width: 60px; } .spinner-circle-container-1 > div, .spinner-circle-container-2 > div, .spinner-circle-container-3 > div { -webkit-animation: spinnerCircle 1.2s infinite ease-in-out; animation: spinnerCircle 1.2s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 15px; position: absolute; width: 15px; } .spinner-circle .spinner-circle-container { position: absolute; height: 100%; width: 100%; } .spinner-circle-container-2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .spinner-circle-container-3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .spinner-circle-1 { left: 0; top: 0; } .spinner-circle-2 { right: 0; top: 0; } .spinner-circle-3 { bottom: 0; right: 0; } .spinner-circle-4 { bottom: 0; left: 0; } .spinner-circle-container-2 .spinner-circle-1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner-circle-container-3 .spinner-circle-1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner-circle-container-1 .spinner-circle-2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner-circle-container-2 .spinner-circle-2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .spinner-circle-container-3 .spinner-circle-2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .spinner-circle-container-1 .spinner-circle-3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .spinner-circle-container-2 .spinner-circle-3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .spinner-circle-container-3 .spinner-circle-3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .spinner-circle-container-1 .spinner-circle-4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .spinner-circle-container-2 .spinner-circle-4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .spinner-circle-container-3 .spinner-circle-4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes spinnerChaseRotate { 100% { -webkit-transform: rotate(360deg) } } @keyframes spinnerChaseRotate { 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spinnerChaseBounce { 0%, 100% { -webkit-transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); } } @keyframes spinnerChaseBounce { 0%, 100% { -webkit-transform: scale(0.0); -ms-transform: scale(0.0); transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .spinner-chase { -webkit-animation: spinnerChaseRotate 2.0s infinite linear; animation: spinnerChaseRotate 2.0s infinite linear; height: 60px; width: 60px; } .spinner-chase-1, .spinner-chase-2 { -webkit-animation: spinnerChaseBounce 2.0s infinite ease-in-out; animation: spinnerChaseBounce 2.0s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 60%; position: absolute; top: 0; width: 60%; } .spinner-chase-2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; bottom: 0; top: auto; } @-webkit-keyframes spinnerCrescent { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinnerCrescent { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .spinner-crescent { -webkit-animation: spinnerCrescent 1.2s infinite linear; animation: spinnerCrescent 1.2s infinite linear; border: 9px solid rgba(255,255,255,1); border-right-color: transparent; border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 60px; width: 60px; } @-webkit-keyframes spinnerCube { 0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); } 35% { -webkit-transform:scale3D(0.0, 0.0, 1.0); } } @keyframes spinnerCube { 0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); -ms-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(1.0, 1.0, 1.0); } 35% { -webkit-transform:scale3D(0.0, 0.0, 1.0); -ms-transform:scale3D(0.0, 0.0, 1.0); transform:scale3D(0.0, 0.0, 1.0); } } .spinner-cube { height: 60px; width: 60px; } .spinner-cube-1, .spinner-cube-2, .spinner-cube-3, .spinner-cube-4, .spinner-cube-5, .spinner-cube-6, .spinner-cube-7, .spinner-cube-8, .spinner-cube-9 { -webkit-animation: spinnerCube 1.3s infinite ease-in-out; animation: spinnerCube 1.3s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); -moz-box-sizing: border-box; box-sizing: border-box; float: left; height: 33%; width: 33%; } .spinner-cube-2, .spinner-cube-5, .spinner-cube-8 { margin: 0 -1px; } .spinner-cube .spinner-cube-1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .spinner-cube .spinner-cube-2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .spinner-cube .spinner-cube-3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .spinner-cube .spinner-cube-4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .spinner-cube .spinner-cube-5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .spinner-cube .spinner-cube-6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .spinner-cube .spinner-cube-7 { -webkit-animation-delay: 0.0s; animation-delay: 0.0s; } .spinner-cube .spinner-cube-8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .spinner-cube .spinner-cube-9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes spinnerDoubleBounce { 0%, 100% { -webkit-transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); } } @keyframes spinnerDoubleBounce { 0%, 100% { -webkit-transform: scale(0.0); -ms-transform: scale(0.0); transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .spinner-double-bounce { height: 60px; width: 60px; } .spinner-double-bounce-1, .spinner-double-bounce-2 { -webkit-animation: spinnerDoubleBounce 2.0s infinite ease-in-out; animation: spinnerDoubleBounce 2.0s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 50%; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; left: 0; opacity: 0.85; position: absolute; top: 0; width: 100%; } .spinner-double-bounce-2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes spinnerFlower { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); box-shadow: rgba(225,232,237,1) 0 0 23px 0, rgba(255,255,255,1) -20px -20px 0 4px, rgba(255,255,255,1) 20px -20px 0 4px, rgba(255,255,255,1) 20px 20px 0 4px, rgba(255,255,255,1) -20px 20px 0 4px; } 50% { -webkit-transform: rotate(1080deg); -ms-transform: rotate(1080deg); transform: rotate(1080deg); box-shadow: rgba(225,232,237,1) 0 0 23px 0, rgba(255,255,255,1) 20px 20px 0 4px, rgba(255,255,255,1) -20px 20px 0 4px, rgba(255,255,255,1) -20px -20px 0 4px, rgba(255,255,255,1) 20px -20px 0 4px; } } @keyframes spinnerFlower { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); box-shadow: rgba(225,232,237,1) 0 0 23px 0, rgba(255,255,255,1) -20px -20px 0 4px, rgba(255,255,255,1) 20px -20px 0 4px, rgba(255,255,255,1) 20px 20px 0 4px, rgba(255,255,255,1) -20px 20px 0 4px; } 50% { -webkit-transform: rotate(1080deg); -ms-transform: rotate(1080deg); transform: rotate(1080deg); box-shadow: rgba(225,232,237,1) 0 0 23px 0, rgba(255,255,255,1) 20px 20px 0 4px, rgba(255,255,255,1) -20px 20px 0 4px, rgba(255,255,255,1) -20px -20px 0 4px, rgba(255,255,255,1) 20px -20px 0 4px; } } .spinner-flower { -webkit-animation: spinnerFlower 5s infinite ease-in-out; animation: spinnerFlower 5s infinite ease-in-out; background: rgba(71,74,84,1); border-radius: 100%; box-shadow: rgba(225,232,237,1) 0 0 23px 0, rgba(255,255,255,1) -20px -20px 0 4px, rgba(255,255,255,1) 20px -20px 0 4px, rgba(255,255,255,1) 20px 20px 0 4px, rgba(255,255,255,1) -20px 20px 0 4px; height: 24px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 24px; } @-webkit-keyframes spinnerOrbit { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spinnerOrbit { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .spinner-orbit { -webkit-animation: spinnerOrbit 1s linear infinite; animation: spinnerOrbit 1s linear infinite; border: 1px solid rgba(255,255,255,1); border-radius: 100%; height: 60px; width: 60px; } .spinner-orbit-1 { background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 20px; width: 20px; } @-webkit-keyframes spinnerPulse { 0% { -webkit-transform: scale(0.0) } 100% { opacity: 0; -webkit-transform: scale(1.0); } } @keyframes spinnerPulse { 0% { -webkit-transform: scale(0.0); -ms-transform: scale(0.0); transform: scale(0.0); } 100% { opacity: 0; -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .spinner-pulse { -webkit-animation: spinnerPulse 1.0s infinite ease-in-out; animation: spinnerPulse 1.0s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 60px; width: 60px; } @-webkit-keyframes spinnerRotatingPlane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes spinnerRotatingPlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .spinner-rotating-plane { -webkit-animation: spinnerRotatingPlane 1.2s infinite ease-in-out; animation: spinnerRotatingPlane 1.2s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); -moz-box-sizing: border-box; box-sizing: border-box; height: 100px; width: 100px; } @-webkit-keyframes spinnerTripleBounce { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0); } } @keyframes spinnerTripleBounce { 0%, 80%, 100% { -webkit-transform: scale(0.0); -ms-transform: scale(0.0); transform: scale(0.0); } 40% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .spinner-triple-bounce { width: 100px; } .spinner-triple-bounce > div { -webkit-animation: spinnerTripleBounce 1.4s infinite ease-in-out; animation: spinnerTripleBounce 1.4s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 100%; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 25px; width: 25px; } .spinner-triple-bounce .spinner-triple-bounce-1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner-triple-bounce .spinner-triple-bounce-2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes spinnerWander { 25% { -webkit-transform: translateX(50px) rotate(-90deg) scale(0.5); } 50% { -webkit-transform: translateX(50px) translateY(50px) rotate(-180deg); } 75% { -webkit-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes spinnerWander { 25% { -webkit-transform: translateX(50px) rotate(-90deg) scale(0.5); -ms-transform: translateX(50px) rotate(-90deg) scale(0.5); transform: translateX(50px) rotate(-90deg) scale(0.5); } 50% { -webkit-transform: translateX(50px) translateY(50px) rotate(-179deg); -ms-transform: translateX(50px) translateY(50px) rotate(-179deg); transform: translateX(50px) translateY(50px) rotate(-179deg); } 50.1% { -webkit-transform: translateX(50px) translateY(50px) rotate(-180deg); -ms-transform: translateX(50px) translateY(50px) rotate(-180deg); transform: translateX(50px) translateY(50px) rotate(-180deg); } 75% { -webkit-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5); -ms-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5); transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } .spinner-wander { height: 100px; width: 100px; } .spinner-wander-1, .spinner-wander-2 { -webkit-animation: spinnerWander 1.8s infinite ease-in-out; animation: spinnerWander 1.8s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); -moz-box-sizing: border-box; box-sizing: border-box; height: 20px; left: 0; position: absolute; top: 0; width: 20px; } .spinner-wander-2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes spinnerWave { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); } } @keyframes spinnerWave { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); -ms-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); -ms-transform: scaleY(1.0); transform: scaleY(1.0); } } .spinner-wave { height: 100px; } .spinner-wave > div { -webkit-animation: spinnerWave 1.2s infinite ease-in-out; animation: spinnerWave 1.2s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 100%; width: 6px; } .spinner-wave .spinner-wave-2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner-wave .spinner-wave-3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner-wave .spinner-wave-4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner-wave .spinner-wave-5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes spinnerWobbler { 0% { left: 4px; } 3% { left: 104px; } 6% { left: 4px; } 9% { left: 104px; } 12% { left: 4px; } 15% { left: 104px; } 18% { left: 32px; } 27% { left: 32px; } 30% { left: 104px; } 33% { left: 4px; } 36% { left: 104px; } 39% { left: 4px; } 42% { left: 104px; } 45% { left: 4px; } 48% { left: 104px; } 51% { left: 52px; } 63% { left: 52px; } 66% { left: 4px; } 69% { left: 104px; } 72% { left: 4px; } 75% { left: 104px; } 78% { left: 4px; } 81% { left: 104px; } 84% { left: 72px; } 94% { left: 72px; } 97% { left: 104px; } } @keyframes spinnerWobbler { 0% { left: 4px; } 3% { left: 104px; } 6% { left: 4px; } 9% { left: 104px; } 12% { left: 4px; } 15% { left: 104px; } 18% { left: 32px; } 27% { left: 32px; } 30% { left: 104px; } 33% { left: 4px; } 36% { left: 104px; } 39% { left: 4px; } 42% { left: 104px; } 45% { left: 4px; } 48% { left: 104px; } 51% { left: 52px; } 63% { left: 52px; } 66% { left: 4px; } 69% { left: 104px; } 72% { left: 4px; } 75% { left: 104px; } 78% { left: 4px; } 81% { left: 104px; } 84% { left: 72px; } 94% { left: 72px; } 97% { left: 104px; } } .spinner-wobbler { border: 1px solid rgba(255,255,255,1); border-radius: 500px; -moz-box-sizing: border-box; box-sizing: border-box; height: 26px; width: 150px; } .spinner-wobbler::after { -webkit-animation: spinnerWobbler 15s infinite ease-in-out; animation: spinnerWobbler 15s infinite ease-in-out; background: rgba(255,255,255,1); border: 1px solid rgba(225,232,237,1); border-radius: 500px; -moz-box-sizing: border-box; box-sizing: border-box; content: ''; height: 20px; left: 5px; position: absolute; top: 2px; width: 20px; }