CSS Wave Generator
CATEGORY: tools
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" class="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;} #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;} #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;} #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;} #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;} #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;} #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;} #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;} #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;} #d10 {left:120px;-webkit-animation-delay:-3s;-moz-animation-delay:-3s;-ms-animation-delay:-3s;-o-animation-delay:-3s;animation-delay:-3s;}
@-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 _