CSS Spinner

gravatar
CSS 2/3,
Snippet by Anon
1772 0
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