Greetings,
i came across this progressbar.js which looks really nice, although im uncertain on where i put my php page in after this loader finishes. Anyone use something like this? thanks
[php]
<title>Progress Bar: Initial Mode Sample (Javascript)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="Progress, Bar, Javascript, UI, Library, Widgets, Plugins, Component, jQuery, Multi, Sparklines">
<meta name="description" content="(Javascript) Multiple progress bar control and tiny chart (sparkline) Features; initial-mode, multi-processing, categorical-processing, limit-lines">
<meta name="author" content="Bugra OZDEN">
<link rel="stylesheet" href="css/libs/controls/progressbar.css" />
<script type="text/javascript" src="js/libs/controls/progressbar.js"></script>
<style type="text/css">
#my-progressbar-container {
position: relative;
width: 200px; /* my-progressbar width */
padding: 20px 5px 20px 5px; /* Space for progresbar-texts */
background-color: transparent;
}
.progressbar-text {
position: absolute;
font-family: Arial;
font-size: 10px;
color: #333333;
}
.progressbar-text.top-right {
top:5px;
right:7px;
}
.progressbar-text.top-left {
top:5px;
left:7px;
}
.progressbar-text.bottom-right {
bottom:5px;
right:7px;
}
.progressbar-text.bottom-left {
bottom:5px;
left:7px;
}
</style>
<script type="text/javascript">
var progressBar;
window.onload = function(){
progressBar = new ProgressBar("my-progressbar", {'width':'200px', 'height':'6px'});
// Start initial Mode
progressBar.initialMode(true);
// CHANGE OPTIONS
//progressBar.setOptionValue(ProgressBar.OPTION_NAME.COLOR_ID, ProgressBar.OPTION_VALUE.COLOR_ID.BLACK);
//progressBar.setOptionValue(ProgressBar.OPTION_NAME.OPACITY, 0.2);
//progressBar.setPercent(60);
// Stop Initial Mode
//progressBar.initialMode(false);
}
</script>
</head>
<body>
<h2>Progress Bar: Initial Mode Sample (Javascript)</h2>
<div id="my-progressbar-container">
<div id="my-progressbar-text1" class="progressbar-text top-left">Initializing...</div>
<div id="my-progressbar-text2" class="progressbar-text top-right"></div>
<div id="my-progressbar"></div>
<div id="my-progressbar-text3" class="progressbar-text bottom-left"></div>
<div id="my-progressbar-text4" class="progressbar-text bottom-right"></div>
</div>
</body>