Musical Notes Loader

HTML
<div class="container"> <span>♫</span> <span>♬</span> <span>♩</span> <span>♪</span> </div>
CSS
* { box-sizing: border-box; margin: 0; padding: 0; *:before, *:after { content: ''; position: absolute; box-sizing: border-box; } } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background:radial-gradient(ellipse at center, rgba(0,26,51,1) 0%, rgba(0,0,0,1) 100%); } .container { position: relative; height: 10vmin; width: auto; } .container span { display: inline-block; font-size: 3em; margin-left: 2vmin; color: #fff; } .container span:after { width: 2vmin; height: 2vmin; background-color: red; } .container span:nth-child(1) { animation: first 4s linear infinite; } .container span:nth-child(2) { animation: second 4s linear infinite; } .container span:nth-child(3) { animation: first 4s linear infinite; } .container span:nth-child(4) { animation: second 4s linear infinite; } @keyframes first { 0%,15%,30%,45%,60%,75%,100% { transform: rotate(0deg) translateY(6vmin); } 5%,20%,35%,50%,65%,80%,95% { transform: rotate(15deg) translateY(-6vmin); } 10%,25%,40%,55%,70%,85%,90% { transform: rotate(-15deg) translateY(6vmin); } } @keyframes second { 0%,15%,30%,45%,60%,75%,100% { transform: rotate(0deg) translateY(-6mvin); } 5%,20%,35%,50%,65%,80%,95% { transform: rotate(15deg) translateY(6vmin); } 10%,25%,40%,55%,70%,85%,90% { transform: rotate(-15deg) translateY(-6vmin); } }
JAVASCRIPT
Expand for more options Login