Defining Preloader

Preloader is a SVG animation popup for page shows until page loading finished. To define Preloader, follow the steps below:

1. Create a HTML file

Create a HTML file to store Preloader SVG.

/preloader.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="height: 100%;width: 100%;background-color:#000;"><circle fill="none" stroke-opacity="1" stroke="#ffa100" stroke-width=".5" cx="100" cy="100" r="0"><animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate></circle></svg>

2. Update the propose.json file

Define a key by name preloader and the value will be preloader SVG HTML file URL.

/propose.json

{
"preloader":"/preloader.html"
}

Note