@-moz-keyframes ball-loader { 0% { -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); -moz-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes ball-loader { 0% { -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes ball-loader { 0% { -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1); -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1); -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes ball-loader-highlight { 0% { -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes ball-loader-highlight { 0% { -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes ball-loader-highlight { 0% { -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px); -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px); transform: skew(-30deg, 0) translate3d(0, 0, 1px); -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-moz-keyframes ball-loader-shadow { 0% { -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); -moz-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes ball-loader-shadow { 0% { -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -webkit-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes ball-loader-shadow { 0% { -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -moz-transform: translate3d(12.5px, -15px, -1px); -ms-transform: translate3d(12.5px, -15px, -1px); -webkit-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1); -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 55% { -moz-transform: translate3d(12.5px, -15px, -1px); -ms-transform: translate3d(12.5px, -15px, -1px); -webkit-transform: translate3d(12.5px, -15px, -1px); transform: translate3d(12.5px, -15px, -1px); -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* :not(:required) hides this rule from IE9 and below */ .ball-loader:not(:required) { position: relative; display: inline-block; font-size: 0; letter-spacing: -1px; border-radius: 100%; background: #f86; width: 50px; height: 50px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -moz-animation: ball-loader 1500ms infinite linear; -webkit-animation: ball-loader 1500ms infinite linear; animation: ball-loader 1500ms infinite linear; } .ball-loader:not(:required)::after { content: ''; position: absolute; top: 4.5px; left: 5.5px; width: 15px; height: 15px; background: #ffb099; border-radius: 100%; -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px); -moz-animation: ball-loader-highlight 1500ms infinite linear; -webkit-animation: ball-loader-highlight 1500ms infinite linear; animation: ball-loader-highlight 1500ms infinite linear; } .ball-loader:not(:required)::before { content: ''; position: absolute; top: 50px; left: 5.5px; width: 50px; height: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 100%; -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1); -moz-animation: ball-loader-shadow 1500ms infinite linear; -webkit-animation: ball-loader-shadow 1500ms infinite linear; animation: ball-loader-shadow 1500ms infinite linear; -webkit-filter: blur(1px); filter: blur(1px); }