Chathurga
Active Member
Here's just something I whipped up in a hour or two today when I was bored. All it does is display vertical columns until a page fully loads then they pull away to reveal the page.
Not very fancy at the moment although there is a few options so far:
Those options are the first lines of the of the loadingJS.js file, just change them around to get new results.
loadingJS requires jQuery because it's easier to work with, I'll turn it into pure JS soon.
You need to add the script as the first child of the body for it to work and also add the loadingJS.css style head tag e.g.:
[highlight=html4strict]
<html>
<head>
<link rel="stylesheet" type="text/css" href="loadingJS.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="loadingJS.js"></script>
<div>The rest of the page code</div>
</body>
</html>
[/highlight]
Screenshots:
While loading
The columns peeling away to reveal the content
Demo
Download
Not very fancy at the moment although there is a few options so far:
- text: The text to display while the page is loading.
Valid values: Any text you want - colours: The list of colours the columns will have.
Valid values: Any valid CSS colours value, either hex (#abc123) or rgb (rgb(123, 321, 231)). - shrinkTo: The direction the columns will shrink to.
Valid values: top, bottom, middle, alt (meaning it will alternate top and bottom). - firstTo: Only used if shrinkTo was set to alternate, set whether to start with bottom or top.
Valid values: top, bottom. - direction: You can set whether the animation plays from left to right or converges meaning it starts on both sides and meets in the middle.
Valid values: left, right, converge. - columns: The amount of columns to display
Valid values: Any whole number - length: The amount of time in milliseconds it takes to shrink one column.
Valid values: Any whole number - delay: The amount of time in milliseconds it waits to start shrinking the next column.
Valid values: Any whole number
Those options are the first lines of the of the loadingJS.js file, just change them around to get new results.
loadingJS requires jQuery because it's easier to work with, I'll turn it into pure JS soon.
You need to add the script as the first child of the body for it to work and also add the loadingJS.css style head tag e.g.:
[highlight=html4strict]
<html>
<head>
<link rel="stylesheet" type="text/css" href="loadingJS.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="loadingJS.js"></script>
<div>The rest of the page code</div>
</body>
</html>
[/highlight]
Screenshots:
While loading
The columns peeling away to reveal the content
Demo
Download
