{**
 * Ecommerce copilot
 *
 * @author    businesstech.fr <modules@businesstech.fr> - https://www.businesstech.fr/
 * @copyright Business Tech - https://www.businesstech.fr/
 * @license   see file: LICENSE.txt
 *
 *           ____    _______
 *          |  _ \  |__   __|
 *          | |_) |    | |
 *          |  _ <     | |
 *          | |_) |    | |
 *          |____/     |_|
 *}
<div id="loaderBlock" class="w-full mx-auto bg-gray-100 shadow-lg rounded-lg px-4 sm:px-8 pt-6 pb-8 mb-4 d-none">
    <div class="w-full text-center mt-5">
        <img src="{$loaderUrl|escape:'htmlall':'UTF-8'}" class="mx-auto" />
    </div>
    <div class="w-full flex justify-center mt-5">
        <div class="relative">
            <svg class="progress-circle" width="100" height="100">
                <circle cx="50" cy="50" r="45" stroke="gray" stroke-width="10" fill="none" />
                <circle cx="50" cy="50" r="45" stroke="url(#gradient)" stroke-width="10" fill="none" stroke-dasharray="282.6" stroke-dashoffset="282.6" style="transition: stroke-dashoffset 2s linear; animation: progress-animation 2s infinite;" />
                <defs>
                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#40FEFE;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#63CAD1;stop-opacity:1" />
                    </linearGradient>
                </defs>
            </svg>
        </div>
    </div>
    <style>
        @keyframes progress-animation {
            0% {
                stroke-dashoffset: 282.6;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>

    <div class="w-full text-center mt-5">
        <p class="text-2xl font-semibold text-gray-800">{l s='Your copilot is working... Please wait a few moments...' mod='btecommercecopilot'}</p>
    </div>
</div>