Animated CSS Ball Loader

Developer

Size

3,707 Kb

Views

18,216

Animated CSS Ball Loader Previews
Animated CSS Ball Loader HTML Codes
Animated CSS Ball Loader CSS Codes

How do I make an animated css ball loader?

Displays as "Loading..." in IE9 and below. Has issues on Safari.. What is a animated css ball loader? How do you make a animated css ball loader? This script and codes were developed by John W. Long on 24 September 2022, Saturday.

Animated CSS Ball Loader Previews

Animated CSS Ball Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS Ball Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="ball">Loading...</span>
</body>
</html>

Animated CSS Ball Loader - Script Codes CSS Codes

@-webkit-keyframes ball { 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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@-moz-keyframes ball { 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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@-o-keyframes ball { 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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@keyframes ball { 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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@-webkit-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-moz-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-o-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-webkit-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-moz-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@-o-keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@keyframes ball-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-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); -webkit-animation-timing-function: linear; -khtml-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-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); -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-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); -webkit-animation-timing-function: ease-in; -khtml-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
body { text-align: center; padding: 30px;
}
/* Styles for old versions of IE */
.ball { font-family: sans-serif; font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.ball: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%; -webkit-animation: ball 1500ms infinite linear; -khtml-animation: ball 1500ms infinite linear; -moz-animation: ball 1500ms infinite linear; -ms-animation: ball 1500ms infinite linear; -o-animation: ball 1500ms infinite linear; animation: ball 1500ms infinite linear;
}
.ball: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); -webkit-animation: ball-highlight 1500ms infinite linear; -khtml-animation: ball-highlight 1500ms infinite linear; -moz-animation: ball-highlight 1500ms infinite linear; -ms-animation: ball-highlight 1500ms infinite linear; -o-animation: ball-highlight 1500ms infinite linear; animation: ball-highlight 1500ms infinite linear;
}
.ball: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); -webkit-animation: ball-shadow 1500ms infinite linear; -khtml-animation: ball-shadow 1500ms infinite linear; -moz-animation: ball-shadow 1500ms infinite linear; -ms-animation: ball-shadow 1500ms infinite linear; -o-animation: ball-shadow 1500ms infinite linear; animation: ball-shadow 1500ms infinite linear; -webkit-filter: blur(1px); filter: blur(1px);
}

Home Page	Home
Developer	John W. Long
Username	jlong
Uploaded	September 24, 2022
Rating	4
Size	3,707 Kb
Views	18,216

Do you need developer help for Animated CSS Ball Loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John W. Long (jlong) Script Codes

Name	Size
Animated CSS Dots Loader	3,317 Kb
Mixins for semi-transparent colors	2,620 Kb
Animated CSS Flower Spinner	2,747 Kb
Animated CSS Throbber	2,665 Kb
March of the Smilies	2,139 Kb
Simple menu 2	3,382 Kb
Horizontal Bar Graph with D3	2,944 Kb
Modular Typography	6,827 Kb
Animated CSS Heart Throbber	2,832 Kb
Pure CSS Spinners	2,043 Kb

Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Learning FlexBox	Alex_rodrigues	2,821 Kb
Pomodoro Clock	Osycon	3,705 Kb
Display properties	Hamzaerbay	1,886 Kb
Scifi-style Radio-based Tab	Aaronchuo	4,427 Kb
Update CSS Variables with JS	Wesbos	2,335 Kb
Transition	Shayhowe	1,632 Kb
RAQuote	Naderk007	4,412 Kb
Electric worm	Jeffibacache	2,377 Kb
STAR WARS LIGHTSABER	Francoiscoron	4,420 Kb
Bootstrap example	Ssaakkaa	2,716 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!