Not about photography this time, but another web programming exercise. I wanted to make a “spinner” to keep people busy while the new photo carrousel I put in the into section of my website was loading.

As my site is already quite “clunky (*)” I thought to try something using only the built-in features of HTML and CSS (no javascript for this one).

It’s quite hypnotic, and I’m rather proud of it, actually!

(* I’m not a professional web programmer and learned most of my skills while building this site over the last 8 years or so. Some of the original code I wrote early on is not so easy to maintain, therefore. When I changed jobs a long time ago, I promised myself to not go and learn another programming language – I broke my promise… 🙂 )

<!DOCTYPE html>
<html>
<title></title>
<head>

<style>
.container {
border: black solid 1px;
padding: 20px;
background-color: grey;
height: 500px;
}

.spincontainer {
padding: 10px;
text-align: center;
background-color: lightgrey;
}

.spinpaper {
display: inline-block;
position: relative;
box-sizing: border-box;
text-align: center;
width: 250px; height: 250px;
background-color: rgba(255,255,255,1);
border-radius: 100%;
}

.spintext::after {
width: 100%;
position: absolute;
top: 50%; left: 0;
margin-top: -11%;
text-align: center;
font-size: 2.2rem;
content: "\00231B";
}

.turning1, .turning2, .turning3
{
display: inline-block;
position: absolute;
box-sizing: border-box;
margin: auto;
width: inherit; max-width: 90%;
height: inherit; max-height: 90%;
top: 0; bottom: 0; left: 0; right: 0; /* Force centering by pulling on all four corners */
border-radius: 100%;
}

.turning1 {
border-top:    20px solid rgba(0,0,127,1);
border-right:  20px solid rgba(0,0,127,1);
border-bottom: 20px double rgba(0,0,127,0);
border-left:   20px double rgba(0,0,127,0.5);
animation: turner linear 3s infinite normal;
}
.turning2 {
border-top:    20px solid rgba(127,0,0,1);
border-right:  20px solid rgba(127,0,0,1);
border-bottom: 20px double rgba(127,0,0,0.5);
border-left:   20px double rgba(127,0,0,0);
animation: turner linear 1.8s infinite reverse;
}
.turning3 {
border-top:    20px solid rgba(0,127,0,1);
border-right:  20px solid rgba(0,127,0,1);
border-bottom: 20px double rgba(0,127,0,0);
border-left:   20px double rgba(0,127,0,0.5);
animation: turner linear 1.2s infinite normal;
}

@keyframes turner{
from {transform:rotate(0)}
to {transform:rotate(360deg)}
}
</style>
</head>

<body>
<div class="container" id="background" >
 <div class="spincontainer">
  <div class="spinpaper" id="spinner">
     <div class="spintext"></div>
     <div class="turning1"><div class="turning2"><div class="turning3" ></div></div></div>
  </div>
 </div> 
</div>
</body>

</html>