<?php
$loading = get_theme_mod('loading');
switch ($loading) {
    case 'none';
    {
        break;
    }
    case 'loading1';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <svg class="pl" viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="pl-grad1" x1="1" y1="0.5" x2="0" y2="0.5">
                            <stop offset="0%" stop-color="hsl(313,90%,55%)" />
                            <stop offset="100%" stop-color="hsl(223,90%,55%)" />
                        </linearGradient>
                        <linearGradient id="pl-grad2" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="hsl(313,90%,55%)" />
                            <stop offset="100%" stop-color="hsl(223,90%,55%)" />
                        </linearGradient>
                    </defs>
                    <circle class="pl__ring" cx="100" cy="100" r="82" fill="none" stroke="url(#pl-grad1)" stroke-width="36" stroke-dasharray="0 257 1 257" stroke-dashoffset="0.01" stroke-linecap="round" transform="rotate(-90,100,100)" />
                    <line class="pl__ball" stroke="url(#pl-grad2)" x1="100" y1="18" x2="100.01" y2="182" stroke-width="36" stroke-dasharray="1 165" stroke-linecap="round" />
                </svg>
            </div>
        </div>
        <?php break;
    }
    case 'loading2';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="loader">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading3';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="centerpreee">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading4';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-4">
                    <div class="ring-1"></div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading5';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-5">


                    <div class="hourglass"></div>


                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading6';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-6">
                    <div class="loaderee">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading7';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-7">
                    <div class="square-holder">
                        <div class="square"></div>
                    </div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading8';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-8">
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading9';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-9">
                    <div class="spinner">
                        <div class="bubble-1"></div>
                        <div class="bubble-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading10';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="load-10">
                    <div class="bar"></div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading11';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <div class="precontainer">
                    <div class="dash uno"></div>
                    <div class="dash dos"></div>
                    <div class="dash tres"></div>
                    <div class="dash cuatro"></div>
                </div>
            </div>
        </div>
        <?php break;
    }
    case 'loading12';
    { ?>
        <div class="pre">
            <div class="load-wrapp">
                <ul class="c">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <?php break;
    }
    case 'custom';
    {
        ?>
        <div class="pre">
            <div class="load-wrapp">
                <?php echo get_theme_mod('custom_loading'); ?>
            </div>
        </div>
    <?php }
}
?>