Splash screen

The splash screen enhances your webpage with a delightful animated loader that showcases your logo and features a smooth transition, keeping users engaged while the site loads!

Loader

We have created a loader using only HTML & CSS :

Loader Markup File : index.html

Loader CSS File : /public/loading.css

Loader logo

The splash screen can be customized, enabling you to supply your logo and branding. You can replace your logo or image with ours inside the index.html file.

<svg
        id="logo"
        width="51"
        height="51"
        viewBox="0 0 51 51"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        style="width: 60px; height: 60px"
        class="text-primary">
    <path d="M25.5 0C11.4407 0 0 11.4407 0 25.5C0 29.7614 1.04945 33.7826 2.90555 37.3158C3.35671 38.174 3.85447 39.0028 4.39634 39.8021C8.98879 46.5571 16.7344 51.0025 25.5 51.0025C39.5593 51.0025 51 39.5618 51 25.5025C51 11.4431 39.5593 0.00245432 25.5 0.00245432V0ZM5.72036 24.8134C6.08079 14.3413 14.6135 5.90914 25.1249 5.71054C25.4927 5.80371 25.7476 5.8969 25.9193 5.97291C25.7035 6.45349 25.0831 7.47835 23.3055 9.24128C21.4714 11.0631 19.1275 12.9658 17.0605 14.6478C16.2734 15.2877 15.528 15.8934 14.8611 16.4524C14.4541 16.7957 13.9637 17.188 13.3924 17.644C11.1661 19.4241 8.09627 21.8785 5.72036 24.811V24.8134ZM21.3808 44.8604C20.2113 44.6127 19.0808 44.2597 17.9971 43.8159L18.0094 43.7914C16.9674 43.2519 16.4745 42.7419 16.2342 42.3447C15.9596 41.9818 15.7609 41.5748 15.6383 41.1187C14.5987 37.2668 19.7208 31.0364 25.1444 24.4408C26.2772 23.0628 27.4248 21.6677 28.5012 20.3044C28.6876 20.069 28.3711 19.7674 28.1431 19.9635C27.2163 20.7629 26.3361 21.4886 25.5907 22.1065C25.1053 22.5086 24.6443 22.8912 24.2127 23.2541C23.9479 23.4772 23.6341 23.7346 23.286 24.0215C21.3122 25.6471 18.0119 28.3687 15.3074 31.3748C12.9388 34.0082 11.4186 36.4135 10.7223 38.6496C10.097 37.9484 9.52081 37.203 9.001 36.416L8.99609 36.4111C8.58417 35.9035 8.28265 35.4058 8.08895 34.9007C7.85112 34.2902 7.77013 33.6722 7.83634 33.0225C8.23845 29.0724 13.6965 24.7105 16.9575 22.1016C17.5313 21.6431 18.0731 21.2091 18.534 20.8217C19.1666 20.2921 19.8925 19.7012 20.6624 19.076C26.5666 14.2776 30.9752 10.4084 31.6544 6.68395C32.7969 7.05909 33.8954 7.53477 34.9375 8.10116C34.962 8.12568 34.9865 8.14776 35.011 8.17228C37.4777 10.4844 34.9742 14.6086 34.1528 15.962C32.3777 18.8896 29.5113 22.3763 26.7382 25.7476C25.24 27.5694 22.9353 30.6245 21.3415 32.765C21.1478 33.0274 21.501 33.3437 21.7388 33.1206C23.4649 31.4999 25.7672 29.3691 26.9123 28.4251C27.2776 28.126 27.6038 27.8563 27.8833 27.6209C28.3026 27.2678 28.7537 26.8952 29.227 26.5029C33.5448 22.9329 39.1915 18.2595 41.0035 13.2061C41.3639 13.6597 41.7048 14.128 42.0235 14.611L42.0039 14.6232C44.8359 18.9018 42.1388 23.6145 33.2628 29.9061C32.0295 30.779 28.8739 33.101 26.1988 35.7932C22.7882 39.2259 21.2067 42.1976 21.3808 44.853V44.8604ZM28.1555 45.1154C27.4468 44.853 27.1428 44.598 27.079 44.5024C27.0741 44.3774 27.1035 43.0043 30.1856 39.8854C32.5566 37.4825 35.4352 35.3665 36.5631 34.5648C39.4883 32.4929 42.7689 29.9748 45.2478 26.8486C44.6103 36.2517 37.3796 43.8723 28.1555 45.1129V45.1154Z"
          fill="currentColor"/>
</svg>

Theme

Since the splash screen appears before the templates and virtual DOM are mounted, we can't directly read the theme value. Instead, we store the current theme's background color in localStorage under the key loader-bg.

const loaderColor = localStorage.getItem("loader-bg");