File: sample.html

Recommend this page to a friend!
  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: 11 years ago
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>