CSS Spinner

<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>

.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;
}