HTML
<div class="spinner-pannel">
<div class="spinner-demo spinner-1">
</div>
<div class="spinner-demo spinner-2">
</div>
<div class="spinner-demo spinner-3">
</div>
<div class="spinner-demo spinner-4">
</div>
<div class="spinner-demo spinner-5">
</div>
</div>
CSS
.spinner-pannel {
position: absolute;
top: 20%;
left: 26%;
}
.spinner-demo {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 15px 5px 0 0;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner-1:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
.spinner-2:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 1px solid #ccc;
border-top-color: #07d;
animation: spinner .8s linear infinite;
}
.spinner-3:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #07d;
border-bottom-color: #07d;
animation: spinner .8s ease infinite;
}
.spinner-4:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border-top: 2px solid #07d;
border-right: 2px solid transparent;
animation: spinner .9s linear infinite;
}
.spinner-5:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 1px solid #f6f;
border-top-color: #0e0;
border-right-color: #0dd;
border-bottom-color: #f90;
animation: spinner .6s linear infinite;
}
{ } JS
Preview