Payament
Free Photos
WordPress Themes

Animated CSS Loaders (colors)

HTML
<div class="contain"> <div class="preload-1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="preload-2"> <span></span> <span></span> <span></span> <span></span> </div> <div class="preload-3"></div> <div class="preload-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="preload-5"></div> </div>
SCSS
html { height: 100%;} body { background: #222; height: 100%; display: flex; justify-content: center; align-items: center; } .preload-1 { position: relative; margin-bottom: 40px; span { display: block; position: absolute; bottom: 0px; width: 9px; height: 5px; background: coral; animation: preload-1 1.5s infinite ease-in-out; &:nth-child(2) { left: 11px; animation-delay: .2s; } &:nth-child(3) { left: 22px; animation-delay: .4s; } &:nth-child(4) { left: 33px; animation-delay: .6s; } &:nth-child(5) { left: 44px; animation-delay: .8s; } } } @keyframes preload-1 { 0% { height: 5px; transform: translateY(0px); background: coral; } 25% { height: 30px; transform: translateY(15px); background: cornflowerblue; } 50% { height: 5px; transform: translateY(0px); background: cornflowerblue; } 100% { height: 5px; transform: translateY(0px); background: coral; } } .preload-2 { position: relative; left: 50%; margin-bottom: 40px; width: 40px; height: 40px; span { position: absolute; display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; &:nth-child(1) { animation: preload-2-1 1.5s infinite ease-in-out; } &:nth-child(2) { left: 20px; animation: preload-2-2 1.5s infinite ease-in-out; } &:nth-child(3) { top: 0px; animation: preload-2-3 1.5s infinite ease-in-out; } &:nth-child(4) { top: 0px; left: 20px; animation: preload-2-4 1.5s infinite ease-in-out; } } } @keyframes preload-2-1 { 0% { transform: translateX(0) translateY(0) rotate(0); border-radius: 0; } 50% { transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius: 50%; background: #3498db; } 80% { transform: translateX(0) translateY(0) rotate(-360deg); border-radius: 0; } 100% { transform: translateX(0) translateY(0) rotate(-360deg); border-radius: 0; } } @keyframes preload-2-2 { 0% { transform: translateX(0px) translateY(0px) rotate(0deg); border-radius: 0; } 50% { transform: translateX(20px) translateY(-10px) rotate(180deg); border-radius: 50%; background: #f1c40f; } 80% { transform: translateX(0) translateY(0) rotate(360deg); border-radius: 0; } 100% { transform: translateX(0) translateY(0) rotate(360deg); border-radius: 0; } } @keyframes preload-2-3 { 0% { transform: translateX(0px) translateY(0px) rotate(0deg); border-radius: 0; } 50% { transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius: 50%; background: #2ecc71; } 80% { transform: translateX(0) translateY(0) rotate(-360deg); border-radius: 0; } 100% { transform: translateX(0) translateY(0) rotate(-360deg); border-radius: 0; } } @keyframes preload-2-4 { 0% { transform: translateX(0px) translateY(0px) rotate(0deg); border-radius: 0; } 50% { transform: translateX(20px) translateY(10px) rotate(180deg); border-radius: 50%; background: #e74c3c; } 80% { transform: translateX(0) translateY(0) rotate(360deg); border-radius: 0; } 100% { transform: translateX(0) translateY(0) rotate(360deg); border-radius: 0; } } .preload-3 { position: relative; margin-bottom: 100px; &:before, &:after { position: absolute; content: ''; width: 20px; height: 20px; border-radius: 50%; } &:before { background: orange; animation: preload-3-1 1.5s infinite ease-in-out; } &:after { background: yellow; left: 22px; animation: preload-3-2 1.5s infinite ease-in-out; } } @keyframes preload-3-1 { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(50px) scale(1.2) rotate(260deg); border-radius: 0; } } @keyframes preload-3-2 { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-50px) scale(1.2) rotate(-260deg); border-radius: 0; } } .preload-4 { position: relative; margin-bottom: 100px; span { position: absolute; width: 20px; height: 20px; background: dodgerblue; border-radius: 50%; animation: preload-4 1s infinite ease-in-out; &:nth-child(2) { left: 20px; animation-delay: .2s; } &:nth-child(3) { left: 40px; animation-delay: .4s; } &:nth-child(4) { left: 60px; animation-delay: .6s; } &:nth-child(5) { left: 80px; animation-delay: .8s; } } } @keyframes preload-4 { 0%, 100% { opacity: 0.3; transform: translateY(0); box-shadow: 0 0 3px rgba(255,255,255,0.1); } 50% { opacity: 1; transform: translateY(-10px); box-shadow: 0 20px 3px rgba(255,255,255,0.05); } } .preload-5 { position: relative; width: 30px; height: 30px; margin-top: 200px; border-radius: 50%; background: peachpuff; animation: preload-5 1.5s infinite linear; &:after { content: ''; position: absolute; width: 50px; height: 50px; border-top: 10px solid coral; border-bottom: 10px solid coral; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 50%; top: -20px; left: -20px; } } @keyframes preload-5 { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
JAVASCRIPT
Expand for more options Login