Etat Pur Design System

Loader 

<div class="relative w-10 h-10">
    <div class="animate-spin-loader absolute inset-0 z-0 rounded-full bg-brand"></div>
    <div class="center absolute left-1/2 top-[40%] -translate-x-1/2 -translate-y-1/2 w-7 h-7 bg-white rounded-full flex items-center justify-center z-10">
        <svg width="16" height="22" viewBox="0 0 340 449" class="text-brand" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M313.924 260.458H26.7112L27.3091 255.82C32.12 218.215 49.188 187.592 78.0487 164.802C106.794 142.083 139.514 130.56 175.31 130.56C212.114 130.56 243.587 141.787 268.847 163.924C294.074 186.06 309.067 216.988 313.414 255.882L313.924 260.458ZM175.305 108.955C128.07 108.955 86.6666 124.913 52.2362 156.392C17.9023 187.819 0.484741 229.444 0.484741 280.112C0.484741 330.316 17.6586 371.359 51.5325 402.11C85.457 432.91 125.673 448.523 171.046 448.523C210.112 448.523 243.844 439.503 271.311 421.709C297.531 404.727 317.336 380.048 330.251 348.282L308.179 343.357C283.577 399.268 237.469 427.596 171.046 427.596C133.281 427.596 99.4113 414.184 70.3759 387.732C41.3128 361.231 26.3283 325.731 25.8362 282.186L25.7902 278.007H339.5V269.917C337.651 222.436 321.282 183.251 290.825 153.59C260.424 123.973 221.56 108.955 175.305 108.955Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M227.885 0L227.801 1.98554C227.228 16.4654 221.701 28.4975 211.346 37.7384C200.38 47.5032 186.436 52.4604 169.916 52.4604C153.805 52.4604 140.09 47.5164 129.133 37.7472C118.759 28.5151 113.218 16.4742 112.645 1.98554L112.575 0L87.7871 0L87.843 2.12202C88.4489 22.8315 96.1477 39.746 110.753 52.4164C126.016 65.6768 145.915 72.3995 169.916 72.3995C193.921 72.3995 213.816 65.6768 229.083 52.4164C243.684 39.7548 251.396 22.8359 252.002 2.12202L252.063 0L227.885 0Z" fill="currentColor" />
        </svg>
    </div>
</div>
 
<div class="relative w-10 h-10">
    <div class="animate-spin-loader absolute inset-0 z-0 rounded-full bg-brand"></div>
    <div class="center absolute left-1/2 top-[40%] -translate-x-1/2 -translate-y-1/2 w-7 h-7 bg-white rounded-full flex items-center justify-center z-10">
        <svg width="16" height="22" viewBox="0 0 340 449" class="text-brand" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M313.924 260.458H26.7112L27.3091 255.82C32.12 218.215 49.188 187.592 78.0487 164.802C106.794 142.083 139.514 130.56 175.31 130.56C212.114 130.56 243.587 141.787 268.847 163.924C294.074 186.06 309.067 216.988 313.414 255.882L313.924 260.458ZM175.305 108.955C128.07 108.955 86.6666 124.913 52.2362 156.392C17.9023 187.819 0.484741 229.444 0.484741 280.112C0.484741 330.316 17.6586 371.359 51.5325 402.11C85.457 432.91 125.673 448.523 171.046 448.523C210.112 448.523 243.844 439.503 271.311 421.709C297.531 404.727 317.336 380.048 330.251 348.282L308.179 343.357C283.577 399.268 237.469 427.596 171.046 427.596C133.281 427.596 99.4113 414.184 70.3759 387.732C41.3128 361.231 26.3283 325.731 25.8362 282.186L25.7902 278.007H339.5V269.917C337.651 222.436 321.282 183.251 290.825 153.59C260.424 123.973 221.56 108.955 175.305 108.955Z" fill="currentColor"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M227.885 0L227.801 1.98554C227.228 16.4654 221.701 28.4975 211.346 37.7384C200.38 47.5032 186.436 52.4604 169.916 52.4604C153.805 52.4604 140.09 47.5164 129.133 37.7472C118.759 28.5151 113.218 16.4742 112.645 1.98554L112.575 0L87.7871 0L87.843 2.12202C88.4489 22.8315 96.1477 39.746 110.753 52.4164C126.016 65.6768 145.915 72.3995 169.916 72.3995C193.921 72.3995 213.816 65.6768 229.083 52.4164C243.684 39.7548 251.396 22.8359 252.002 2.12202L252.063 0L227.885 0Z" fill="currentColor"/>
        </svg>
    </div>
</div>
 
/* No context defined. */

No notes defined.