Login   Register  
Icontem

File: sample.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Dixan Santiesteban  >  Animate Progress Bar  >  sample.html  >  Download  
File: sample.html
Role: Example script
Content type: text/plain
Description: The Sample page
Class: Animate Progress Bar
Show and update a progress bar
Author: By
Last change:
Date: 2012-11-19 19:45
Size: 2,969 bytes
 

Contents

Class file image Download 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="progressbar.class.js"></script>


<title>Documento sin t&iacute;tulo</title>
<style>



.progressbar {
	position:relative;
	width: 200px;
	height: 20px;
	border:#666666 1px solid;
	-ms-border-radius: 3px; 
	border-radius: 3px; 
	-webkit-border-radius: 3px; 
	-khtml-border-radius: 3px;
}

.progressinner {
	left:0px;
	position:absolute;
	height: 20px;
	
	background-color: #eaaf51;
	border-color: #d99a36;
	
	-webkit-background-size: 20px 20px;
	background-size: 20px 20px;		
			
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 50%, transparent 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); 
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 50%, transparent 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);

	-webkit-animation: animate-bg 3s linear infinite;
	-moz-animation: animate-bg 3s linear infinite;


}

.progresstit {
	left:0px;
	width:100%;
	position:absolute;
	font-family:tahoma;
	font-size:11px;
	font-weight:bold;
	padding-top:3px;
	text-align:center;	
}

@-webkit-keyframes animate-bg { from { background-position: 0 0;} to {background-position: -80px 0;}}
@-moz-keyframes animate-bg { from { background-position: 0 0;}to { background-position: -80px 0;}}

.blue { background-color: #4ea5cd; border-color: #3b8eb5; }
.red {  background-color: #de4343; border-color: #c43d3d;}
.yelow {  background-color: #eaaf51; border-color: #d99a36; }
.green {  background-color: #61b832;  border-color: #55a12c; }



.Estilo1 {font-size: 36px}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><span class="Estilo1">SAMPLES</span><br>
      <div id="pbobject01"> </div>
        <p>    The percent is random, green & animate</p>
    <p>&nbsp;</p>
    
     <div id="pbobject02"> </div>
        <p>    The percent is random, yelow (without animate)</p>
        <p>&nbsp;</p>
    
     <div id="pbobject03"> </div>
        <p>    Red (and animate 1 time)</p>
        <p>&nbsp;</p>
    
    <div id="pbobject04"> </div>
        <p>    Blue (without animate)</p>
    <p>&nbsp;</p>    </td>
  </tr>
</table>
</body>
</html>
<script>
	
	var u1=new progressbar("pbobject01",{animate:true, color:'green'});
	var u2=new progressbar("pbobject02",{color:'yelow'});
	var u3=new progressbar("pbobject03",{animate:true,color:'red'});
	var u4=new progressbar("pbobject04",{animate:true,color:'blue'});
	
	u1.percent(100);
	u2.percent(100)
	u3.percent(100)
	u4.percent(56)
	
	setInterval(function(){
		var p=parseInt(Math.random()*100);
		u1.percent(p)
		u2.percent(p)
	},1000)
	
	
	
	
</script>