HTML进度条

如何将进度条添加到我的网站，看起来像本网站上的进度条？ Progress Example HTML进度条

它看起来像苹果的一个！

来源

2013-02-02 Nicholas Gibson

那你试试？ – veritas

<progress max="Maximum Value" value="Initial Value" />

详情请参阅this。

请注意，这仅适用于支持HTML5的浏览器。

来源

2013-02-02 22:53:25 David

@TildalWave的确。我会在我的回答结束时加以解决。 – David

非常感谢您的帮助！ –

现在，有一个问题，我将如何使其大于默认大小。对不起，以前从未用过HTML！ –

您可以改用jQuery。 HTML5没有限制。您也可以申请款式可供

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Progressbar - Custom Label</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    .progress-label { 
    float: left; 
    margin-left: 50%; 
    margin-top: 5px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #fff; 
    } 
    </style> 
    <script> 
    $(function() { 
    var progressbar = $("#progressbar"), 
     progressLabel = $(".progress-label"); 

    progressbar.progressbar({ 
     value: false, 
     change: function() { 
     progressLabel.text(progressbar.progressbar("value") + "%"); 
     }, 
     complete: function() { 
     progressLabel.text("Complete!"); 
     } 
    }); 

    function progress() { 
     var val = progressbar.progressbar("value") || 0; 

     progressbar.progressbar("value", val + 1); 

     if (val < 99) { 
     setTimeout(progress, 100); 
     } 
    } 

    setTimeout(progress, 3000); 
    }); 
    </script> 
</head> 
<body> 

<div id="progressbar"><div class="progress-label">Loading...</div></div> 


</body> 
</html>

源代码在这里http://jqueryui.com/progressbar/

来源

2013-03-27 16:35:31

回答

相关问题