Making a Pi Themed Loading Screen

646 Views, 15 Favorites, 0 Comments

Making a Pi Themed Loading Screen

Hello all!

It has not been a long time since we celebrated Pi day this year, and today I am going to be making a Pi themed loader screen. I will be using HTML and CSS to make it. Do use it in all of your Pi and math themed websites!

How Should It Look?

I will be using an image of Pi at the center with a circular border. Behind it, I will be placing a few (thousand) digits of Pi. These digits will be scrolling across the screen as my site's content gets loaded.

I will begin with the image first, then move over to the text and also add a bit of flair to the screen's background.

This requires some level of understanding of both HTML and CSS. If you are a beginner, check out my other Instructable on HTML and CSS for Beginners.

Let's begin!

Adding the Image

First, download an image of Pi from the web. You can get the one which I have used from here. Then, create a container using the div tag. Inside it, we will insert the image using the img tag. I have placed the container within a pair of center tags as well.

Here is the code:

<html>
<head>
</head>
<body>
	<center>
	<div>
		<img src="FILE LOCATION HERE\FILENAME.EXTENSION">
	</div>
	</center>

</body>
</html>

Decorate With CSS

At this point, the loader will look nothing more than just the image we inserted. Now, we will add some charm to it by using CSS. Within the style tags in the head tag, we will type in the CSS declarations for the div, img and body tag.

body {
	font-family: sans-serif;
	background-color: #ededed;
	overflow: hidden;
}
div {
	box-shadow: 5px 5px 100px black;
	border-radius: 360px;
	width: 250px;
	height: 250px;
	background-color: white;
	position: relative;
	margin-top: 150px;
	border: 50px solid white;
	z-index: 2;
}
img {
	margin-left: -15px;
	margin-top: 15px;
}

Make sure you have overflow: hidden typed in. Else, the long string of digits of Pi will cause a horizontal scrollbar to be created. overflow: hidden basically means that all the extra content which doesn't fit into the screen will be clipped off.

The box-shadow enables us to add a shadow to the div element. Here, the shadow is 5 pixels long and wide and fades at a distance of 100 pixels.

The border-radius property gives a rounded edge to our div element. Since the height and width are equal here, the borders form a perfect circle.

The margin-top property lowers the div by 150 pixels. Also add a solid white border 50 pixels wide to the container. Finally, place the container one unit higher by using the z-index property. (The default is 1.)

You may have to use the margin property to center the image within the container. I found -15px and 15px comfortable. This value varies with the image you use.

Adding the Digits

Now comes the fun part. This is where we add the value of Pi. Create a paragraph with the p tag and put the digits there.You can use italics or bold if you want to make it look better. I got the digits from here. You can use as many digits as you want. If your site takes longer to load, you may want to use more digits. Then we also add some CSS to the p tag.

Here is the HTML code:

<i><p>DIGITS OF PI HERE</p></i>

And CSS:

p {
	margin-top: -200px;
	font-size: 50px;
	position:relative;

}

Using the margin-top property, we place the text in such a way that is passes through the middle of the container. Remember to type in position:relative as well. Without this, the scrolling will not work.

Adding the Animations

Now that the layout is ready, we will animate the text, the image and the screen itself. Let us begin with the text. We have to get it to scroll across the screen. This can be done using the marquee tag. Replace the p tag with the marquee tag and for CSS, replace the p selector with the marquee selector.

So, instead of

<p>DIGITS OF PI HERE</p>

use

<marquee scrollamount=30>DIGITS OF PI HERE</marquee>

The scrollamount attribute defines the speed at which the text scrolls. The higher the value, the faster the scroll.

For CSS, instead of

p {
	Declarations
}

use

marquee {
	Declarations
}

Animating the Image

Now that the text is moving, let's make the loader a bit more interactive by adding animations to the image. Since it's an image, I cannot change the text color. But, by reducing the opacity of the image, I can make it quite gray.

Let's go back to the CSS code for the img tag and add these lines.

-webkit-animation: Myanimation 0.5s infinite;
animation: Myanimation 0.5s infinite;

This property is used to add animations to elements in CSS. You may have noticed that both these lines are essentially the same except for the -webkit- prefix in the first line. This is because some browsers support only -webkit- animations(like Safari).

Next, type in the following lines of code within the style tag.

@-webkit-keyframes Myanimation {
	from {opacity:1;}
	to {opacity:0.5;}
}
@keyframes Myanimation {
	from {opacity:1;}
	to {opacity:0.5;}
}

This will alternatively reduce and increase opacity of the image to make it look black and gray.

Finally, you can add some text below the container as well.

<p style="text-align: center;">Loading Content</p>

That's It!

That's how you make a Pi themed loader screen. Once your files are loaded, perhaps you can call a Javascript function to open a new page. You can also add your own animations! The possibilities are endless. Hope you enjoyed the Instructable! It would be great if you could post your creations in the comments section!