[Vuejs]-VueJs:Laravel- Add loading spinner that shows in front of the page while all data is loading

by

-1👍

Here is a loader i’m using :

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
    <style type="text/css">
          <![CDATA[
            g circle {
              stroke: #fff;
              stroke-width: 3;
            }
            g circle {
              opacity: 0;
              animation: size cubic-bezier(0.165, 0.84, 0.44, 1) 1.8s infinite,
                         opacity cubic-bezier(0.3, 0.61, 0.355, 1) 1.8s infinite;
              transform-origin: 50% 50%;
            }
            g circle:last-child { animation-delay: 0.9s; }
            @keyframes size {
              0% { transform: scale(0); }
              100% { transform: scale(1); }
            }
            @keyframes opacity {
              5% { opacity: 1; }
              100% { opacity: 0; }
            }
          ]]>
    </style>
    <g fill="none">
        <circle cx="22" cy="22" r="20"/>
        <circle cx="22" cy="22" r="20"/>
    </g>
</svg>

it’s a plain svg loader that will works regardless of js/vue, or even loading of external css,
and there is many more svg loaders to choose from on the internet.

Those loaders will load instantly, and are perfect for that.
If you need to, you can also put the loader outside of the #app div,
so you can decide when you want to remove it, if your app takes time to load.

You will perhaps need a black or white background, and you will perhaps need to center it on your webpage and make it absolute positionned.

i took the loader here : https://samherbert.net/svg-loaders/

Leave a comment