The Blog

Loading Screen HTML: How to design a website Preloader?

Hey Folks! You must be enjoying coffee and thinking about your website preloader. Well, you have landed at the perfect destination. Curious about Loading Screen HTML: How to design a Website Preloader?

This piece of content is for you. So, we will show you one of the very basic but mind-blowing website preloader and also teach you how to make it.

Just have a look at this Website Preloader.

Isn’t it amazing?

Well, It’s not a pro thing but we are presenting a showcase example to you so that you have an idea of thinking and designing a Website Preloader.

So, what are we waiting for? Let’s Jump to the detailed analysis of How to design a Website Preloader?

Website Preloader or Loading Screen: Make your website attractive

It is quite frustrating for your clients when they land up to your website and see the page is still loading.

I know sometimes our page becomes too bulky despite all optimization. So, Why not to show your creativity and engage your client with the preloading image, text or some design?

So, let the page load and in the meanwhile, you showcase a fantastic Website Preloader.

Well, not quite difficult for you to design a Loading Screen or Website Preloader. We will teach you so nicely through this tutorial.

 

If you want us to design a superb Website Preloader for your Website then Contact us now.

 

Designing the Website Preloader: Is it really difficult?

Well, folks if you are a web designer, little aware about the HTML things then you can do it. Just go through the entire tutorials and you will end up learning a fantastic piece of art today.

Before starting to make the preloader take your time and imagine what should the preloader look like. Make a rough sketch of it for your convenience. Think about the Color you gonna use. Don’t be lazy come on you can do great!

There are multiple techniques and ways in which you can design a preloader.

Here we are using Inkscape for designing our preloader vector. For your convenience, you can also use Adobe illustrator if you are familiar with it.

Open up Inkscape and start with the very basic shape.

inkscape circle draw

I started with a circle and colored it blue. (style and color preference can change as per your choice).

Next, I want a circle but without fill effect so that we can only see the stroke.

In the Fill and Stroke settings, Set Fill to none or ‘x‘  and set Stroke paint to the color of your choice.

By doing the above steps you will get a ring.

2 circles inkscape

Let’s align them horizontally and vertically.

To do so select both the circles and go to Align and Distribute(Shift+Ctrl+A).

Vertical and horizontal align circles inkscape

Under the above section select Center on the vertical axis and Center on the horizontal axis.

Now I would like to make the bigger circle dashed so that when it rotates the effect can be seen. It’s as simple as breathing.

  • Go to  Fill and Stroke settings under Stroke style tab
  • Select the Dashes.

dashed outer circle inkscape

I also added the name of the website at the center of the circle and colored out it white.

Also, I wanted the text to separate for that we need to select the Text and go to Path do Object to Path.  Now you can individually select each alphabet.

object to path inkscape

Save the design as plain SVG.

save as plain svg inkscape

I guess I am pretty much done with the design of the loader.

Now we can add simple animation to the loader so we can produce loading effect.

Lets quickly jump to the animation part.

Loading Screen HTML: Have a sneak of the code

So, let’s jump into the Coding Part which is quite an important aspect in designing a Loading Screen or a Website Preloader.

  • Open the SVG in a code editor.

Here I’m using Visual Studio code to edit the SVG.

svg in visual studio code

 

As you can see the SVG  XML codes now it’s easy for us to manipulate and give after effects like animation.

For this design, we can see that we are having 2 circle tags.

You can easily distinguish between the bigger and the smaller circle by looking at the radius “r=” value.

Making the bigger circle animate about its axis.

 

Below is the source code of the bigger circle from our example demo:

<circle
style=”opacity:1;fill:none;fill-opacity:1;stroke:#ff00bf;stroke-width:0.15800001;stroke-miterlimit:15.60000038;stroke-dasharray:3.79200033, 3.79200033;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke”
id=”circle840″
cx=”109.0057″
cy=”120.03777″
r=”24.927349″/>

 

let add few codes to animate the SVG circle.

How to rotate a SVG Circle?: Code to make the circle rotate.

<animateTransform attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 109.0057 120.03777 ”
to=”360 109.0057 120.03777″
dur=”10s”
repeatCount=”indefinite”/>

To add the code inside the circle tag you need to delete / from the end tag of the circle tag .ie /> and add another ending tag like </circle>

Like this you can add the animateTransform  tag between the circle tag.

Below is the modified code after adding this is how it should look.

<circle
style=”opacity:1;fill:none;fill-opacity:1;stroke:#ff00bf;stroke-width:0.15800001;stroke-miterlimit:15.60000038;stroke-dasharray:3.79200033, 3.79200033;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke”
id=”circle840″
cx=”109.0057″
cy=”120.03777″
r=”24.927349″>

<animateTransform attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 109.0057 120.03777 “
to=”360 109.0057 120.03777″
dur=”10s”
repeatCount=”indefinite”/>

</circle>

 

Let’s dive into the above code. 

Here we are specifying the attributes such as type=”rotate” as we want the circle to rotate. The from=”0 109.0057 120.03777 ” attribute specifies that it should rotate starting from 0 degrees and you must specify the cx and cy after that in order to rotate it at its locus. The to=”360 109.0057 120.03777″ specifies that it should rotate till 360 degrees and here also add defining the cx and cy values.

Next the dur=”10s” is the duration for which it should animate here its value is 10seconds. Last the repeatCount=”indefinite” it specifies that it should rotate for an indefinite number of count.

thus you can see SVG file in a browser and see the bigger circle rotating. If you are not getting the desired output then check the cx and cy value carefully and check the opening and closing tag of the element.

Let’s move to the final animations of the text inside the smaller circle which is ‘ codingzap.

The text inside the circle is the paths which you can see in the codes ‘<path …..‘.

Below is the initial SVG code of the first letter which is ‘c’.

<path
id=”path1580″
style=”font-size:4.23333311px;fill:#ffffff;stroke-width:0.26458332″
d=”m 100.44498,121.12559 q -0.1943,0.093 -0.37,0.1447 -0.173635,0.0517 -0.370005,0.0517 -0.250114,0 -0.458887,-0.0723
-0.208773,-0.0744 -0.357601,-0.22325 -0.150895,-0.14882 -0.233577,-0.3762 -0.08268,-0.22738 -0.08268,-0.53123 0,-0.56638
0.310059,-0.88884 0.312126,-0.32246 0.822689,-0.32246 0.198437,0 0.388605,0.0558 0.19224,0.0558 0.3514,0.13643 v 0.43201 h
-0.0207 q -0.17777,-0.13849 -0.36794,-0.21291 -0.188098,-0.0744 -0.367932,-0.0744 -0.330729,0 -0.522965,0.22324 -0.190169,0.22118
-0.190169,0.65113 0,0.41754 0.186035,0.64285 0.188102,0.22324 0.527099,0.22324 0.117823,0 0.239779,-0.031 0.121953,-0.031 0.219113
,-0.0806 0.0847,-0.0434 0.15916,-0.091 0.0744,-0.0496 0.11782,-0.0847 h 0.0207 z”/>

 

let’s give it a vertical moment animation.

Remove the / at the end of the code and add a </path> ending at the next line.

Above the </path> tag add the below code.

<animateTransform attributeName=”transform”
attributeType=”XML”
type=”translate”
dur=”1s”
values=”0,4 ; 0,-4;0,4″
repeatCount=”indefinite”/>

 

Below is the final code of the letter c after modification.

<path
id=”path1580″
style=”font-size:4.23333311px;fill:#ffffff;stroke-width:0.26458332″
d=”m 100.44498,121.12559 q -0.1943,0.093 -0.37,0.1447 -0.173635,0.0517 -0.370005,0.0517 -0.250114,0 -0.458887,-0.0723
-0.208773,-0.0744 -0.357601,-0.22325 -0.150895,-0.14882 -0.233577,-0.3762 -0.08268,-0.22738 -0.08268,-0.53123 0,-0.56638
0.310059,-0.88884 0.312126,-0.32246 0.822689,-0.32246 0.198437,0 0.388605,0.0558 0.19224,0.0558 0.3514,0.13643 v 0.43201 h
-0.0207 q -0.17777,-0.13849 -0.36794,-0.21291 -0.188098,-0.0744 -0.367932,-0.0744 -0.330729,0 -0.522965,0.22324 -0.190169,0.22118
-0.190169,0.65113 0,0.41754 0.186035,0.64285 0.188102,0.22324 0.527099,0.22324 0.117823,0 0.239779,-0.031 0.121953,-0.031 0.219113
,-0.0806 0.0847,-0.0434 0.15916,-0.091 0.0744,-0.0496 0.11782,-0.0847 h 0.0207 z”>

<animateTransform attributeName=”transform”
attributeType=”XML”
type=”translate”
dur=”1s”
values=”0,4 ; 0,-4;0,4″
repeatCount=”indefinite”/>

</path>

The above green code you see is the code which make the letter move verticly from itnital position to down and then to its initail position and then up which means it will oscillates vertically up and down.

Here the dur=”1s” is one second, the values=”0,4 ; 0,-4;0,4″ specifies the moment of the word from zero to 4 mm up and down. The repeatCount=”indefinite” is again indefinite for the number of counts.

 

The above code was for the 1st letter ‘c‘  but for the proceeding letters which is ‘ o d i n g z a p‘  a slight modification is needed.

Which is add the begin attribute example begin=”.1″  this will start the amination of the letter ‘o’  0.1 seconds after the letter ‘c’. so for all the letter after that, we need to add being and then give it a value .1+  and so.

Below is the final code for the letters ‘o ‘ and ‘d’.

<path
id=”path1582″
style=”font-size:4.23333311px;fill:#ffffff;stroke-width:0.26458332″
d=”m 102.91305,120.11687 q 0,0.56431 -0.28939,0.8909 -0.28939,0.3266 -0.77515,0.3266 -0.48989,0 -0.77928,-0.3266 -0.28732,-0.32659 -0.28732,-0.8909 0,-0.56431 0.28732,-0.8909 0.28939,-0.32867 0.77928,-0.32867 0.48576,0 0.77515,0.32867 0.28939,0.32659 0.28939,0.8909 z m -0.40101,0 q 0,-0.44855 -0.1757,-0.66559 -0.1757,-0.21911 -0.48783,-0.21911 -0.31626,0 -0.49196,0.21911 -0.17363,0.21704 -0.17363,0.66559 0,0.43408 0.1757,0.65939 0.1757,0.22324 0.48989,0.22324 0.31006,0 0.48576,-0.22117 0.17777,-0.22325 0.17777,-0.66146 z”>
<animateTransformattributeName=”transform”
attributeType=”XML”
type=”translate”
begin=”.1″
dur=”1s”
values=”0,4 ; 0,-4;0,4″
repeatCount=”indefinite”/>
</path>
<path
id=”path1584″
style=”font-size:4.23333311px;fill:#ffffff;stroke-width:0.26458332″
d=”m 105.38938,121.27029 h -0.3886 v -0.24185 q -0.16744,0.14469 -0.34934,0.22531 -0.1819,0.0806 -0.3948,0.0806 -0.41342,0 -0.65733,-0.31833 -0.24184,-0.31833 -0.24184,-0.88263 0,-0.29353 0.0827,-0.52297 0.0847,-0.22944 0.22737,-0.39067 0.14056,-0.1571 0.3266,-0.23978 0.1881,-0.0827 0.38861,-0.0827 0.1819,0 0.32246,0.0393 0.14056,0.0372 0.29559,0.11782 v -1.00045 h 0.3886 z m -0.3886,-0.56844 v -1.32499 q -0.1571,-0.0703 -0.28112,-0.0971 -0.12403,-0.0269 -0.27079,-0.0269 -0.32659,0 -0.50849,0.22738 -0.18191,0.22737 -0.18191,0.64492 0,0.41134 0.14056,0.62632 0.14056,0.2129 0.45062,0.2129 0.16537,0 0.33487,-0.0723 0.16949,-0.0744 0.31626,-0.19017 z”>
<animateTransformattributeName=”transform”
attributeType=”XML”
type=”translate”
begin=”.2″
dur=”1s”
values=”0,4 ; 0,-4;0,4″
repeatCount=”indefinite”/>
</path>

 

Finally, after completing all the modification and addition of the codes the result will be as below.

Hope you liked this piece of content informative and useful. If you want us to develop a super cool and attractive Website Preloader then Contact us now.

Loading Screen HTML: How to design a website Preloader?

 

codingzapserver
codingzapserver

Leave a Comment