This is a CSS wave generator: just set the parameters below and get the CSS and HTML code! There is an explanation of the parameters at the bottom of the page.

HTML Code

<div id="wave-container"><div class="dot" id="d1"></div><div class="dot" id="d2"></div><div class="dot" id="d3"></div><div class="dot" id="d4"></div><div class="dot" id="d5"></div><div class="dot" id="d6"></div><div class="dot" id="d7"></div><div class="dot" id="d8"></div><div class="dot" id="d9"></div><div class="dot" id="d10"></div></div>

CSS Code

#wave-container { position:relative; height: 36px; width: 132px; } .dot { transform-origin: 50% 50%; height: 6px; width: 6px; border-radius : 50%; top:0; background-color: #c0392b; position: absolute; -webkit-animation:vertical-movement 2.5s infinite ease-in-out; -moz-animation:vertical-movement 2.5s infinite ease-in-out; -ms-animation:vertical-movement 2.5s infinite ease-in-out; -o-animation:vertical-movement 2.5s infinite ease-in-out; animation:vertical-movement 2.5s infinite ease-in-out; } #d1 {left:12px;-webkit-animation-delay:-0.3s;-moz-animation-delay:-0.3s;-ms-animation-delay:-0.3s;-o-animation-delay:-0.3s;animation-delay:-0.3s;opacity: 0.1} #d2 {left:24px;-webkit-animation-delay:-0.6s;-moz-animation-delay:-0.6s;-ms-animation-delay:-0.6s;-o-animation-delay:-0.6s;animation-delay:-0.6s;opacity: 0.2} #d3 {left:36px;-webkit-animation-delay:-0.9s;-moz-animation-delay:-0.9s;-ms-animation-delay:-0.9s;-o-animation-delay:-0.9s;animation-delay:-0.9s;opacity: 0.3} #d4 {left:48px;-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-ms-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s;opacity: 0.4} #d5 {left:60px;-webkit-animation-delay:-1.5s;-moz-animation-delay:-1.5s;-ms-animation-delay:-1.5s;-o-animation-delay:-1.5s;animation-delay:-1.5s;opacity: 0.5} #d6 {left:72px;-webkit-animation-delay:-1.8s;-moz-animation-delay:-1.8s;-ms-animation-delay:-1.8s;-o-animation-delay:-1.8s;animation-delay:-1.8s;opacity: 0.6} #d7 {left:84px;-webkit-animation-delay:-2.1s;-moz-animation-delay:-2.1s;-ms-animation-delay:-2.1s;-o-animation-delay:-2.1s;animation-delay:-2.1s;opacity: 0.7} #d8 {left:96px;-webkit-animation-delay:-2.4s;-moz-animation-delay:-2.4s;-ms-animation-delay:-2.4s;-o-animation-delay:-2.4s;animation-delay:-2.4s;opacity: 0.8} #d9 {left:108px;-webkit-animation-delay:-2.7s;-moz-animation-delay:-2.7s;-ms-animation-delay:-2.7s;-o-animation-delay:-2.7s;animation-delay:-2.7s;opacity: 0.9} #d10 {left:120px;-webkit-animation-delay:-3s;-moz-animation-delay:-3s;-ms-animation-delay:-3s;-o-animation-delay:-3s;animation-delay:-3s;opacity: 1} .last-dot { transform-origin: 50% 50%; height: 6px; width: 6px; border-radius : 50%; } #head-dot { height: 6px; width: 6px; border-radius: 50% } @-webkit-keyframes vertical-movement { 0%,100% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(30px); } } @keyframes vertical-movemen { 0%,100% { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 50% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } }

Parameters

  • Wave height: wave amplitude in pixel
  • Dot delay: time delay between two dots
  • Cycle time: time required for a dot to go up and down one time
  • Dots number: total number of the dots in the wave
  • Dot size: size of a dot in pixel
  • Dot gap: distance between two dots _