preloadingSVG-spin

by mtambulut

HTML

<div id="preload" class="preload">
        <div class="content">
            
            <svg width="121px" height="121px" enable-background="new 37.715 37.715 121 121" version="1.1" viewBox="37.715 37.715 121 121" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g fill="#0d75af"><path d="m75.064 122.84c0 1.066-0.876 1.932-1.957 1.932h-0.521c-1.082 0-1.958-0.864-1.958-1.932s0.876-1.934 1.958-1.934h0.521c1.081 0 1.957 0.865 1.957 1.934z"></path><path d="m86.134 106.99c0 1.066-0.877 1.933-1.957 1.933h-0.521c-1.081 0-1.957-0.865-1.957-1.933s0.876-1.935 1.957-1.935h0.521c1.08 1e-3 1.957 0.867 1.957 1.935z"></path><path d="m63.042 105.06h-0.521c-1.08 0-1.957 0.866-1.957 1.934s0.876 1.934 1.957 1.934h0.521c1.082 0 1.958-0.865 1.958-1.934 0-1.068-0.876-1.934-1.958-1.934z"></path><path d="m84.176 88.062h-0.521c-1.081 0-1.958 0.866-1.958 1.934s0.877 1.934 1.958 1.934h0.521c1.082 0 1.958-0.866 1.958-1.934 0-1.069-0.876-1.934-1.958-1.934z"></path><path d="m74.025 69.116h-0.521c-1.081 0-1.957 0.865-1.957 1.933s0.876 1.934 1.957 1.934h0.521c1.081 0 1.958-0.865 1.958-1.934s-0.877-1.933-1.958-1.933z"></path><path d="m89.813 62.199h-0.521c-1.08 0-1.957 0.864-1.957 1.934 0 1.067 0.876 1.933 1.957 1.933h0.521c1.082 0 1.958-0.864 1.958-1.933s-0.876-1.934-1.958-1.934z"></path><path d="m124.55 79.542c-3.456 0-6.271 2.777-6.271 6.192 0 3.416 2.813 6.194 6.271 6.194s6.271-2.778 6.271-6.194c-1e-3 -3.414-2.813-6.192-6.271-6.192zm0 8.52c-1.3 0-2.355-1.044-2.355-2.328 0-1.282 1.057-2.326 2.355-2.326s2.356 1.044 2.356 2.326c0 1.285-1.056 2.328-2.356 2.328z"></path><path d="m72.847 77.215c-3.458 0-6.271 2.778-6.271 6.193s2.812 6.193 6.271 6.193c3.457 0 6.271-2.778 6.271-6.193s-2.814-6.193-6.271-6.193zm0 8.519c-1.3 0-2.356-1.044-2.356-2.325 0-1.283 1.057-2.328 2.356-2.328 1.298 0 2.355 1.044 2.355 2.328 0 1.281-1.056 2.325-2.355 2.325z"></path><path d="m65.155 89.452h-0.521c-1.082 0-1.957 0.865-1.957 1.933s0.875 1.935 1.957 1.935h0.521c1.082 0 1.958-0.865 1.958-1.935...

CSS

.preload {
    width: 100%;
    height: 84%;
    margin-top: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: table;
}

.preload .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 0;
}

.preload .content svg {
    -webkit-animation: preloading-spin infinite 10s linear;
    animation: preloading-spin infinite 10s linear;
    height: 30%;
}

svg:not(:root) {
    overflow: hidden;
}

.preload .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 0;
}

@-webkit-keyframes preloading-spin{  
from{-webkit-transform:rotate(0);transform:rotate(0)} 
to {-webkit-transform:rotate(360deg);transform:rotate(360deg)} 
}

@keyframes preloading-spin{ 
from{-webkit-transform:rotate(0);transform:rotate(0)} 
to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} 
}