How to Create Wave Loader using CSS?
A Wave Loader can be used in websites when something is loading it will provide better user experience, The wave loader can be easily created using HTML and CSS.
HTML Code: In this section, we will create a basic div tag which consists of various span tags inside of it.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Wave Loader</ title > </ head > < body > < div > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > </ body > </ html > |
CSS Code: In this section, we will first design the span element using some basic CSS properties, then we will use the nth-child() Selector to select every span element i.e the nth child and then we will create the loading animation using @keyframes rule.
< style > *{ margin: 0; padding: 0; } div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; } span{ height: 30px; width: 7px; margin-right: 10px; background-color: green; animation: loading 1s linear infinite; } span:nth-child(1){ animation-delay: 0.1s; } span:nth-child(2){ animation-delay: 0.2s; } span:nth-child(3){ animation-delay: 0.3s; } span:nth-child(4){ animation-delay: 0.4s; } span:nth-child(5){ animation-delay: 0.5s; } // @keyframes for animation @keyframes loading { 0%{ height: 0; } 25%{ height: 25px; } 50%{ height: 50px; } 100%{ height: 0; } } </ style > |
Final Code: It is the combination of the above two code sections.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Wave Loader</ title > </ head > < style > *{ margin: 0; padding: 0; } div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; } span{ height: 30px; width: 7px; margin-right: 10px; background-color: green; animation: loading 1s linear infinite; } span:nth-child(1){ animation-delay: 0.1s; } span:nth-child(2){ animation-delay: 0.2s; } span:nth-child(3){ animation-delay: 0.3s; } span:nth-child(4){ animation-delay: 0.4s; } span:nth-child(5){ animation-delay: 0.5s; } @keyframes loading { 0%{ height: 0; } 25%{ height: 25px; } 50%{ height: 50px; } 100%{ height: 0; } } </ style > < body > < div > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > </ body > </ html > |
Output: