Loading Indicator

by samih

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<div class="loading-outer">
    
    <div class="loading-inner">
    </div>
    
    <div class="loading-indicator"></div>
    
    
    <div class="loading-cutout"></div>
</div>

CSS

.loading-outer {
    position: relative;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    
    opacity: 0.6;
    border: 13px solid #EDEDED;
    border-radius: 50px;
    
    & > .loading-inner, loading-inner2 {
        position: relative;
        top: 3px;
        left: 3px;
        width: 68px;
        height: 68px;
        border: 9px solid #7D8BAB;
        border-radius: 34px;
        opacity: 0.4;
        box-sizing: border-box;
        
        
    }
    
    & > .loading-indicator {
        width: 34px;
        height: 34px;
        position: absolute;
        top: 3px;
        left: 3px;
        border: 9px solid #7D8BAB;
        opacity: 1;
        border-radius:  100% 0 0 0 ;
        box-sizing: border-box;
        
        -webkit-animation:1s rotateRight infinite linear;
        -webkit-transform-origin: bottom right;
        
        @-webkit-keyframes rotateRight {
            100%{ 
                -webkit-transform:rotate(360deg);
            }
        }
    }
    
    & > .loading-cutout {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 50px;
        height: 50px;
        border-radius: 100%;       
        background-color: #FFF;
    }
}

JavaScript

/**
    LESS SHIM
*/
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); }());