/*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT */ .la-ball-zig-zag, .la-ball-zig-zag > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-zig-zag { display: block; font-size: 0; color: #fff; } .la-ball-zig-zag.la-dark { color: #333; } .la-ball-zig-zag > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-zig-zag { position: relative; width: 32px; height: 32px; } .la-ball-zig-zag > div { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 100%; } .la-ball-zig-zag > div:first-child { -webkit-animation: ball-zig-effect .7s 0s infinite linear; -moz-animation: ball-zig-effect .7s 0s infinite linear; -o-animation: ball-zig-effect .7s 0s infinite linear; animation: ball-zig-effect .7s 0s infinite linear; } .la-ball-zig-zag > div:last-child { -webkit-animation: ball-zag-effect .7s 0s infinite linear; -moz-animation: ball-zag-effect .7s 0s infinite linear; -o-animation: ball-zag-effect .7s 0s infinite linear; animation: ball-zag-effect .7s 0s infinite linear; } .la-ball-zig-zag.la-sm { width: 16px; height: 16px; } .la-ball-zig-zag.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; } .la-ball-zig-zag.la-2x { width: 64px; height: 64px; } .la-ball-zig-zag.la-2x > div { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; } .la-ball-zig-zag.la-3x { width: 96px; height: 96px; } .la-ball-zig-zag.la-3x > div { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; } /* * Animations */ @-webkit-keyframes ball-zig-effect { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 33% { -webkit-transform: translate(-75%, -150%); transform: translate(-75%, -150%); } 66% { -webkit-transform: translate(75%, -150%); transform: translate(75%, -150%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes ball-zig-effect { 0% { -moz-transform: translate(0, 0); transform: translate(0, 0); } 33% { -moz-transform: translate(-75%, -150%); transform: translate(-75%, -150%); } 66% { -moz-transform: translate(75%, -150%); transform: translate(75%, -150%); } 100% { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes ball-zig-effect { 0% { -o-transform: translate(0, 0); transform: translate(0, 0); } 33% { -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%); } 66% { -o-transform: translate(75%, -150%); transform: translate(75%, -150%); } 100% { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes ball-zig-effect { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 33% { -webkit-transform: translate(-75%, -150%); -moz-transform: translate(-75%, -150%); -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%); } 66% { -webkit-transform: translate(75%, -150%); -moz-transform: translate(75%, -150%); -o-transform: translate(75%, -150%); transform: translate(75%, -150%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes ball-zag-effect { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 33% { -webkit-transform: translate(75%, 150%); transform: translate(75%, 150%); } 66% { -webkit-transform: translate(-75%, 150%); transform: translate(-75%, 150%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes ball-zag-effect { 0% { -moz-transform: translate(0, 0); transform: translate(0, 0); } 33% { -moz-transform: translate(75%, 150%); transform: translate(75%, 150%); } 66% { -moz-transform: translate(-75%, 150%); transform: translate(-75%, 150%); } 100% { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes ball-zag-effect { 0% { -o-transform: translate(0, 0); transform: translate(0, 0); } 33% { -o-transform: translate(75%, 150%); transform: translate(75%, 150%); } 66% { -o-transform: translate(-75%, 150%); transform: translate(-75%, 150%); } 100% { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes ball-zag-effect { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 33% { -webkit-transform: translate(75%, 150%); -moz-transform: translate(75%, 150%); -o-transform: translate(75%, 150%); transform: translate(75%, 150%); } 66% { -webkit-transform: translate(-75%, 150%); -moz-transform: translate(-75%, 150%); -o-transform: translate(-75%, 150%); transform: translate(-75%, 150%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } }