Animated CSS Google Plus-Like Loader
How do I make an animated css google plus-like loader?
Displays as "Loading..." on IE9 and below.. What is a animated css google plus-like loader? How do you make a animated css google plus-like loader? This script and codes were developed by John W. Long on 24 September 2022, Saturday.
Animated CSS Google Plus-Like Loader Previews
Animated CSS Google Plus-Like Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS Google Plus-Like Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="folding">Loading...</span>
</body>
</html>Animated CSS Google Plus-Like Loader - Script Codes CSS Codes
@-webkit-keyframes folding-top { 2.5% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 13.75% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 25% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 41.25% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 50% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 63.75% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 75% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 91.25% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 100% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-moz-keyframes folding-top { 2.5% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 13.75% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 25% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 41.25% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 50% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 63.75% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 75% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 91.25% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 100% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-o-keyframes folding-top { 2.5% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 13.75% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 25% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 41.25% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 50% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 63.75% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 75% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 91.25% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 100% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@keyframes folding-top { 2.5% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 13.75% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 25% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #fc6; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 41.25% { background: #ffae0d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 50% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #6d7; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -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; } 63.75% { background: #2cc642; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 75% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #4ae; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -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; } 91.25% { background: #1386d2; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -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; } 100% { background: #f86; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-webkit-keyframes folding-bottom { 0% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-moz-keyframes folding-bottom { 0% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-o-keyframes folding-bottom { 0% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@keyframes folding-bottom { 0% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #fc6; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #4ae; -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-webkit-keyframes folding-background { 0% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-moz-keyframes folding-background { 0% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@-o-keyframes folding-background { 0% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
@keyframes folding-background { 0% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #f86; -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #6d7; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #6d7; -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #f86; -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -khtml-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; }
}
body { text-align: center; padding: 50px;
}
/* Styles for old versions of IE */
.folding { font-family: sans-serif; font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.folding:not(:required) { overflow: hidden; position: relative; text-indent: -9999px; display: inline-block; width: 48px; height: 48px; background: #f86; -moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px; -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: folding-background 3s infinite ease-in-out; -khtml-animation: folding-background 3s infinite ease-in-out; -moz-animation: folding-background 3s infinite ease-in-out; -ms-animation: folding-background 3s infinite ease-in-out; -o-animation: folding-background 3s infinite ease-in-out; animation: folding-background 3s infinite ease-in-out;
}
.folding:not(:required)::after { background: #f86; -moz-border-radius: 24px 0 0 24px; -webkit-border-radius: 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: folding-top 3s infinite linear; -khtml-animation: folding-top 3s infinite linear; -moz-animation: folding-top 3s infinite linear; -ms-animation: folding-top 3s infinite linear; -o-animation: folding-top 3s infinite linear; animation: folding-top 3s infinite linear;
}
.folding:not(:required)::before { background: #fc6; -moz-border-radius: 24px 0 0 24px; -webkit-border-radius: 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: folding-bottom 3s infinite linear; -khtml-animation: folding-bottom 3s infinite linear; -moz-animation: folding-bottom 3s infinite linear; -ms-animation: folding-bottom 3s infinite linear; -o-animation: folding-bottom 3s infinite linear; animation: folding-bottom 3s infinite linear;
}
| Developer | John W. Long |
| Username | jlong |
| Uploaded | September 24, 2022 |
| Rating | 4.5 |
| Size | 3,913 Kb |
| Views | 22,264 |
Do you need developer help for Animated CSS Google Plus-Like 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 |
| The Matrix in Sass | 15,344 Kb |
| Simple menu 3 | 3,414 Kb |
| UserVoice Listboxes | 6,978 Kb |
| Mixins for semi-transparent colors | 2,620 Kb |
| March of the Smilies | 2,139 Kb |
| Animated CSS Spinner | 2,508 Kb |
| Animated CSS Flower Spinner | 2,747 Kb |
| Horizontal Bar Graph with D3 | 2,944 Kb |
| Modular Typography | 6,827 Kb |
| Sass Radar | 6,887 Kb |
Create amazing art & images 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 |
| A cube | KyleDavidE | 18,627 Kb |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Codero Sitemap | S1m0ne | 28,169 Kb |
| Sass Radar | Jlong | 6,887 Kb |
| Twitch.tv API | Ryzokuken | 2,618 Kb |
| Sexy Social Buttons | Ipiyale | 2,226 Kb |
| Wave Lines | Mikehobizal | 4,023 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| Cool Page Split Effect | Anthonyadamski | 6,128 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!