Fortodo Radio

Live

.container-loader { font-size: 1em; line-height: 1.6; align-items: center; display: flex; justify-content: center; height: 100%; flex-direction: column; } .loader { width: 60px; height: 60px; font-size: 10px; } .loader > div { height: 100%; width: 8px; display: inline-block; float: left; margin-left: 2px; -webkit-animation: delay 0.8s infinite ease-in-out; animation: delay 0.8s infinite ease-in-out; } .loader .bar1 { background-color: '{{color1}}'; } .loader .bar2 { background-color: '{{color2}}'; -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .loader .bar3 { background-color: '{{color3}}'; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .loader .bar4 { background-color: '{{color4}}'; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .loader .bar5 { background-color: '{{color5}}'; -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .loader .bar6 { background-color: '{{color6}}'; -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } @-webkit-keyframes delay { 0%, 40%, 100% { -webkit-transform: scaleY(0.05); } 20% { -webkit-transform: scaleY(1); } } @keyframes delay { 0%, 40%, 100% { transform: scaleY(0.05); -webkit-transform: scaleY(0.05); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } }