<?php
/**
 * Created by PhpStorm.
 * User: marco
 * Date: 24/06/18
 * Time: 3.26
 */ ?>
<div class="loader" id="site-loader">
    <div class="svg-container" id="svg-container">
        <svg
                xmlns:svg="http://www.w3.org/2000/svg"
                xmlns="http://www.w3.org/2000/svg"
                id="svg1356"
                version="1.1"
                viewBox="0 0 52.916665 52.916668"
                height="200"
                width="200">
            <defs
                    id="defs1350"/>
            <g
                    transform="translate(0,-244.08332)"
                    id="layer1">
                <g
                        transform="matrix(1.8260089,0,0,1.8260089,1.6116995,-201.38381)"
                        id="g1914">
                    <path
                            style="clip-rule:evenodd;fill:#273b2a;fill-rule:evenodd;stroke-width:0.01;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
                            id="logo-goccia"
                            d="m 14.492299,244.6812 c 1.919997,3.06 6.799994,9.71 6.809994,13.57 0.01,3.86 -3.019997,6.99 -6.769994,7 -3.75,0.01 -6.7899967,-3.12 -6.7999967,-6.98 -0.01,-3.86 4.6999967,-10.37 6.7599967,-13.59 z m -0.01,3.25 c -2.13,3.25 -4.9199997,7.74 -4.9199997,10.34 0.01,2.55 1.8999997,5.33 4.9699997,5.32 3.059997,0 4.949997,-2.79 4.939997,-5.34 0,-2.58 -2.84,-7.06 -4.989997,-10.32 z"
                            class="fil0"/>

                    <path
                            style="clip-rule:evenodd;fill:#b5c389;fill-rule:evenodd;stroke-width:0.01;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
                            id="arco-a"
                            d="m 23.512293,263.7112 c -2.86,4.97 -9.199994,6.68 -14.1599937,3.82 -4.970007,-2.85 -6.680004,-9.19 -3.829997,-14.16 l 1.41,0.81 c -2.41,4.19 -0.96,9.54 3.2299967,11.95 4.19,2.41 9.529997,0.96 11.939994,-3.23 z"
                            class="fil2"/>
                    <path
                            style="clip-rule:evenodd;fill:#dfeac0;fill-rule:evenodd;stroke-width:0.01;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
                            id="arco-b"
                            d="m 7.7123023,270.3912 c 6.5399967,3.76 14.8899907,1.51 18.6499877,-5.04 l -1.439997,-0.83 c -3.3,5.75 -10.639994,7.73 -16.3799907,4.43 -5.750007,-3.31 -7.730007,-10.64 -4.43,-16.39 l -1.440007,-0.83 c -3.76,6.55 -1.51,14.9 5.040007,18.66 z"
                            class="fil1"/>
                </g>
            </g>
        </svg>
    </div>
</div>
<style>
    body {
     /**    overflow: hidden **/
    }
    body, html, div, svg {
        margin: 0;
        padding: 0;

    }
    .preloader-class  {position: fixed;



    }
    #impact-load {overflow-y: visible}

    .loader {

        left: 0;
        top: 0;
        float: left;
        margin: 0;
        padding: 0;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 999999;
        background-color: white;
        color: white;
        display: block;
        opacity: 1;
    }

    .svg-container {
        float: left;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        background-color: white;
        width: 300px;
        height: 300px;
        border-radius: 150px;
        opacity: 1;
    }

    .svg-container svg {
        width: 100%;
        height: 100%;
        opacity: 1;
        transform: scale(0.8);
    }
</style>
<script>
    const elementLoader = document.getElementById("svg-container");
    const bodyL = document.getElementById("impact-load");
    const elementStyle = elementLoader.style;
    // //body.element.style.transform
    //
    // elementStyle.opacity = '0';
    // function getScrollBarWidth () {
    //     var inner = document.createElement('p');
    //     inner.style.width = "100%";
    //     inner.style.height = "200px";
    //
    //     var outer = document.createElement('div');
    //     outer.style.position = "absolute";
    //     outer.style.top = "0px";
    //     outer.style.left = "0px";
    //     outer.style.visibility = "hidden";
    //     outer.style.width = "200px";
    //     outer.style.height = "150px";
    //     outer.style.overflow = "hidden";
    //     outer.appendChild (inner);
    //
    //     document.body.appendChild (outer);
    //     var w1 = inner.offsetWidth;
    //     outer.style.overflow = 'scroll';
    //     var w2 = inner.offsetWidth;
    //     if (w1 == w2) w2 = outer.clientWidth;
    //
    //     document.body.removeChild (outer);
    //
    //     return (w1 - w2);
    // };
    // window.scrollW = getScrollBarWidth();
    // bodyL.style.transform = 'translateX(-'+window.scrollW+'px)';





</script>
