<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery进度条特效 - ab北漂族 http://www.360lifer.com</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="stylesheets/ui.css">
<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
<link media="only screen and (max-device-width: 480px)" href="stylesheets/ios.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div class="content">
<h1>Pure CSS Progress Bar</h1>
</div>
<!-- Progress bar -->
<div id="progress_bar" class="ui-progress-bar ui-container">
<div class="ui-progress" style="width: 79%;">
<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
</div>
</div>
<!-- /Progress bar -->
<div class="content" id="main_content" style="display: none;">
<p>
Inspired by a shot from Jonno Riekwel, I knocked up a quick Progress Bar in Photoshop on a friday afternoon before heading to the pub.
Then a couple of people suggested implementing it with CSS.
</p>
<p>
So I did.
</p>
<p>
Enjoy,<br>
</p>
<p class="small">
This is best viewed in a Webkit based browser, Chrome is good*, also Safari. Opera 10.62+ looks ok, however it doesn't support gradients. Firefox and IE 9 kind of work (no stripe animation). IE 8, 7 and 6 do not support rounding, shadows, animation, or much else for that matter, in fact they are pretty bloody useless at being browsers.
</p>
<p class="small">
* There is a known issue with Chrome for Windows and Linux which will cancel out the rounded corners due to the use of inset box shadow. Because I use a Mac this is not regarded as an issue.
</p>
</div>
</div>
<script src="javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/progress.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
很完美的jquery网页加载进度条
最新推荐文章于 2021-08-05 18:10:33 发布
扫一扫
2314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
