/*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT */ .la-ball-rotate, .la-ball-rotate > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-rotate { display: block; font-size: 0; color: #fff; } .la-ball-rotate.la-dark { color: #333; } .la-ball-rotate > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-rotate { width: 10px; height: 10px; } .la-ball-rotate > div { width: 10px; height: 10px; border-radius: 100%; -webkit-animation: ball-rotate-animation 1s cubic-bezier(.7, -.13, .22, .86) infinite; -moz-animation: ball-rotate-animation 1s cubic-bezier(.7, -.13, .22, .86) infinite; -o-animation: ball-rotate-animation 1s cubic-bezier(.7, -.13, .22, .86) infinite; animation: ball-rotate-animation 1s cubic-bezier(.7, -.13, .22, .86) infinite; } .la-ball-rotate > div:before, .la-ball-rotate > div:after { position: absolute; width: inherit; height: inherit; margin: inherit; content: ""; background: currentColor; border-radius: inherit; opacity: .8; } .la-ball-rotate > div:before { top: 0; left: -150%; } .la-ball-rotate > div:after { top: 0; left: 150%; } .la-ball-rotate.la-sm { width: 4px; height: 4px; } .la-ball-rotate.la-sm > div { width: 4px; height: 4px; } .la-ball-rotate.la-2x { width: 20px; height: 20px; } .la-ball-rotate.la-2x > div { width: 20px; height: 20px; } .la-ball-rotate.la-3x { width: 30px; height: 30px; } .la-ball-rotate.la-3x > div { width: 30px; height: 30px; } /* * Animation */ @-webkit-keyframes ball-rotate-animation { 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 ball-rotate-animation { 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 ball-rotate-animation { 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 ball-rotate-animation { 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); } }