<!-- Controls -->
<input type="radio" name="color" id="red" checked /><label for="red">Red</label>
<input type="radio" name="color" id="green" /><label for="green">Green</label>
<input type="radio" name="color" id="blue" /><label for="blue">Blue</label>
<input type="radio" name="color" id="yellow" /><label for="yellow">Yellow</label>
<input type="radio" name="color" id="pink" /><label for="pink">Pink</label>
<!-- /Controls -->
<h1>CSS Loading</h1>
<ul class="drops blue">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:700);
/* Meat and potatoes */
.drops {
list-style: none;
position: relative;
height: 10px;
width: 140px;
margin: 0 auto; /* center the animation */
margin-top: 40px; /* padd the top from the text */
}
.drops li {
position: absolute;
top: 0px;
height: 10px;
width: 10px;
background-color: black;
border-radius: 5px;
margin-left: -3000px; /* the dots like to jump out of place without this */
animation-name: loading;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
.drops li:nth-child(1) {
left: 0px;
animation-delay: 250ms;
}
.drops li:nth-child(2) {
left: 40px;
animation-delay: 500ms;
}
.drops li:nth-child(3) {
left: 80px;
animation-delay: 750ms;
}
.drops li:nth-child(4) {
left: 120px;
animation-delay: 1s;
}
.drops li:nth-child(5) {
left: 160px;
animation-delay: 1.25s;
}
@keyframes loading {
0% { margin-left: -3000px; }
30%,70% { margin-left: 0px; }
100% { margin-left: 3000px; }
}
/* Colours */
#pink:checked ~ .drops li {
background-color: #ff55de;
box-shadow: 0 0 5px #ff99de,
0 0 10px #ff99de,
0 0 15px #ff99de,
0 0 20px #ff00de,
0 0 30px #ff00de,
0 0 40px #ff00de;
}
#blue:checked ~ .drops li {
background-color: #99deff;
box-shadow: 0 0 5px #99afff,
0 0 10px #99afff,
0 0 15px #99afff,
0 0 20px #99afff,
0 0 30px #99afff,
0 0 40px #99afff;
}
#green:checked ~ .drops li {
background-color: #99ffde;
box-shadow: 0 0 5px #99ffaf,
0 0 10px #99ffaf,
0 0 15px #99ffaf,
0 0 20px #99ffaf,
0 0 30px #99ffaf,
0 0 40px #99ffaf;
}
#red:checked ~ .drops li {
background-color: #ff4444;
box-shadow: 0 0 5px #ff2222,
0 0 10px #ff2222,
0 0 15px #ff2222,
0 0 20px #ff2222,
0 0 30px #ff2222,
0 0 40px #ff2222;
}
#yellow:checked ~ .drops li {
background-color: #ffff44;
box-shadow: 0 0 5px #ffff22,
0 0 10px #ffff22,
0 0 15px #ffff22,
0 0 20px #ffff22,
0 0 30px #ffff22,
0 0 40px #ffff22;
}
/* Presentation - toggle buttons and positioning/backgrounds */
body {
background: #474747 url(https://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
padding: 1em;
overflow: hidden;
}
h1, label {
font-family: "Advent Pro";
text-align: center;
color: #222;
letter-spacing: 0.15em;
font-weight: 700;
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #555;
}
h1 {
font-size: 2.6em;
}
label {
display: inline-block;
background-color: #999999;
border: 1px solid #222;
border-radius: 3px;
padding: 6px 12px;
cursor: pointer;
}
input {
display: none;
}
input[type="radio"]:checked + label {
background-color: white;
}/*
Controls are pure HTML/CSS...
because I can.......
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░░░░░░░░░░░░░░░░░░░░░
░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░░░░░░░░░░░░░░░░░░░░░
░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░░░░░░░░░░░░░░░░░░░░░
░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░░░░░░░░░░░░░░░░░░░░░
█░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█░░░░░░░░░░░░░░░░░░░░
█░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█░░░░░░░░░░░░░░░░░░░░
░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░░░░░░░░░░░░░░░░░░░░░
░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░░░░░░░░░░░░░░░░░░░░░
░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░░░░░░░░░░░░░░░░░░░░░
░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░░░░░░░░░░░░░░░░░░░░░
░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒█░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒█░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░▀▄▄▄▄▄█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
█░░░░░█░░░░░░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░░░█▀▀█░
█░█▀█░█░░█░█░░█▀█▀█░█▀▀█░█▀▀█░░█▀▀█░█▀▀░█▀▀▀█░░░░█░
█░█░█░█░░█░█░░█░█░█░█▀▀█░█░░█░░█░░█░█░░░█░░░█░░▀▀▀░
▀░▀▀▀░▀░░▀▀▀░░▀░░░▀░▀░░▀░▀▀▀▀░░▀▀▀▀░▀░░░▀▀▀▀▀░░█░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
- rlemon
*/
External CSS
This Pen doesn't use any external CSS resources.