HTML
<head>
<meta charset="UTF-8">
<title>Loading Rainbow Animation 2</title>
</head>
<body>
<div class="wrapper">
<div class="tube">
<div class="colored-tube ck1"> </div>
<div class="bubbles" id="b1"> </div>
</div>
<div class="tube">
<div class="colored-tube ck2"> </div>
<div class="bubbles" id="b2"> </div>
</div>
<div class="tube">
<div class="colored-tube ck3"> </div>
<div class="bubbles" id="b3"> </div>
</div>
<div class="tube">
<div class="colored-tube ck4"> </div>
<div class="bubbles" id="b4"> </div>
</div>
<div class="tube">
<div class="colored-tube ck5"> </div>
<div class="bubbles" id="b5"> </div>
</div>
</div>
<div class="danBkg display-none"> </div>
</body>
CSS
body {
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
.wrapper {
position: relative;
top: 50%;
width: 100%;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.bubbles {
position: absolute;
top: 0;
width: 44px;
height: 44px;
margin: auto;
border-radius: 100%;
-webkit-animation-name: up-down;
animation-name: up-down;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.tube {
position: relative;
display: inline-block;
width: 45px;
height: 200px;
background-color: grey;
border-radius: 22px;
overflow: hidden;
}
.colored-tube {
position: absolute;
top: -80%;
width: 100%;
height: 100%;
border-radius: 22px;
-webkit-animation-name: up-down;
animation-name: up-down;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.ck1 {
background-color: #BC86E2;
}
.ck2 {
background-color: #2BB3E8;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.ck3 {
background-color: #4eda7b;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.ck4 {
background-color: #ffd30e;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.ck5 {
background-color: #ff5a58;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
#b1 {
background-color: #8861A4;
}
#b2 {
background-color: #2495C1;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#b3 {
background-color: #48BB6D;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#b4 {
background-color: #F1C500;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
#b5 {
background-color: #F35957;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes up-down {
0% {
top: 0;
}
100% {
top: 156px;
}
}
@keyframes up-down {
0% {
top: 0;
}
100% {
top: 156px;
}
}
