Inevitably, some activities on a compter take a while. It's helpful to display something to give the user some assurance that things are happening while they wait. Here's a simple spinner created with two <div> elements and some CSS.
The spinner is made up of one <div> that sets the size, and a nested <div> that rotates within it. The outer <div> uses a CSS grid to centre the inner rotating element. The inner <div> uses percentages to set its height and width. Together, this allows the spinner to be scaled easily (within limits).
This works on all major browsers, but not Internet Explorer
HTML
<div id="spinner">
<div></div>
</div>
CSS
#spinner {
border-radius: 20px;
border:1px solid grey;
background-color:rgba(224,224,224,0.5);
width:60px;
height:60px;
margin: 100px auto;
display:grid;
place-items:center;
}
#spinner > div {
background-color:darkgrey;
border-radius:2px;
width:6%;
height:90%;
animation-duration: 1s;
animation-name: spinner;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}