登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
1 Star 0 Fork 44

gaobo.xiao / materialUI

forked from deng-dev / materialUI 
代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
ui-progress.html 19.72 KB
一键复制 编辑 原始数据 按行查看 历史
liudeng 提交于 2015-07-09 13:58 . init
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta content="IE=edge" http-equiv="X-UA-Compatible">

	<meta content="initial-scale=1.0, width=device-width" name="viewport">

	<title>Progress Bars - Material</title>



	<!-- css -->

	<link href="css/base.min.css" rel="stylesheet">



	<!-- favicon -->

	<!-- ... -->



	<!-- ie -->

		<!--[if lt IE 9]>

			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

		<![endif]-->

</head>

<body class="avoid-fout">

	<div class="avoid-fout-indicator avoid-fout-indicator-fixed">

		<div class="progress-circular progress-circular-alt progress-circular-center">

			<div class="progress-circular-wrapper">

				<div class="progress-circular-inner">

					<div class="progress-circular-left">

						<div class="progress-circular-spinner"></div>

					</div>

					<div class="progress-circular-gap"></div>

					<div class="progress-circular-right">

						<div class="progress-circular-spinner"></div>

					</div>

				</div>

			</div>

		</div>

	</div>

	<header class="header">

		<ul class="nav nav-list pull-left">

			<li>

				<a data-toggle="menu" href="#menu">

					<span class="icon icon-lg">menu</span>

				</a>

			</li>

		</ul>

		<a class="header-logo" href="index.html">Material</a>

		<ul class="nav nav-list pull-right">

			<li>

				<a data-toggle="menu" href="#profile">

					<span class="access-hide">John Smith</span>

					<span class="avatar"><img alt="alt text for John Smith avatar" src="images/users/avatar-001.jpg"></span>

				</a>

			</li>

		</ul>

	</header>

	<nav class="menu" id="menu">

		<div class="menu-scroll">

			<div class="menu-wrap">

				<div class="menu-content">

					<a class="menu-logo" href="index.html">Material</a>

					<ul class="nav">

						<li>

							<a href="ui-card.html">Cards</a>

						</li>

						<li>

							<a href="ui-collapse.html">Collapsible Regions</a>

						</li>

						<li>

							<a href="ui-dropdown.html">Dropdowns</a>

						</li>

						<li>

							<a href="ui-modal.html">Modals &amp; Toasts</a>

						</li>

						<li>

							<a href="ui-nav.html">Navs</a>

						</li>

						<li class="active">

							<a href="ui-progress.html">Progress Bars</a>

						</li>

						<li>

							<a href="ui-tab.html">Tabs</a>

						</li>

						<li>

							<a href="ui-tile.html">Tiles</a>

						</li>

					</ul>

					<hr>

					<ul class="nav">

						<li>

							<a href="ui-button.html">Buttons</a>

						</li>

						<li>

							<a href="ui-form.html">Form Elements</a>

							<span class="menu-collapse-toggle collapsed" data-target="#form-elements" data-toggle="collapse"><i class="icon menu-collapse-toggle-close">close</i><i class="icon menu-collapse-toggle-default">add</i></span>

							<ul class="menu-collapse collapse" id="form-elements">

								<li>

									<a href="ui-form-adv.html">Form Elements <small>(materialised)</small></a>

								</li>

							</ul>

						</li>

						<li>

							<a href="ui-icon.html">Icons</a>

						</li>

						<li>

							<a href="ui-table.html">Tables</a>

						</li>

					</ul>

					<hr>

					<ul class="nav">

						<li>

							<a href="page-affix.html">Full-Width Page <small>(with fixed LHC/RHC)</small></a>

						</li>

						<li>

							<a href="page-palette.html">Page Palettes</a>

							<span class="menu-collapse-toggle collapsed" data-target="#page-palettes" data-toggle="collapse"><i class="icon menu-collapse-toggle-close">close</i><i class="icon menu-collapse-toggle-default">add</i></span>

							<ul class="menu-collapse collapse" id="page-palettes">

								<li>

									<a href="page-palette-blue.html">Blue Palette</a>

								</li>

								<li>

									<a href="page-palette-green.html">Green Palette</a>

								</li>

								<li>

									<a href="page-palette-purple.html">Purple Palette</a>

								</li>

								<li>

									<a href="page-palette-red.html">Red Palette</a>

								</li>

								<li>

									<a href="page-palette-yellow.html">Yellow Palette</a>

								</li>

							</ul>

						</li>

					</ul>

				</div>

			</div>

		</div>

	</nav>

	<nav class="menu menu-right" id="profile">

		<div class="menu-scroll">

			<div class="menu-wrap">

				<div class="menu-top">

					<div class="menu-top-img">

						<img alt="John Smith" src="images/samples/landscape.jpg">

					</div>

					<div class="menu-top-info">

						<a class="menu-top-user" href="javascript:void(0)"><span class="avatar pull-left"><img alt="alt text for John Smith avatar" src="images/users/avatar-001.jpg"></span>John Smith</a>

					</div>

					<div class="menu-top-info-sub">

						<small>Some additional information about John Smith</small>

					</div>

				</div>

				<div class="menu-content">

					<ul class="nav">

						<li>

							<a href="javascript:void(0)"><span class="icon icon-lg">account_box</span>Profile Settings</a>

						</li>

						<li>

							<a href="javascript:void(0)"><span class="icon icon-lg">add_to_photos</span>Upload Photo</a>

						</li>

						<li>

							<a href="page-login.html"><span class="icon icon-lg">exit_to_app</span>Logout</a>

						</li>

					</ul>

				</div>

			</div>

		</div>

	</nav>

	<div class="content">

		<div class="content-heading">

			<div class="container">

				<h1 class="heading">Progress Bars</h1>

			</div>

		</div>

		<div class="container">

			<div class="row">

				<div class="col-lg-6 col-md-8">

					<section class="content-inner">

						<h2 class="content-sub-heading">Circular Progress Bars</h2>

						<p>Default circular progress bar inherits link colour (<code>$link-color</code>):</p>

						<div class="progress-circular progress-circular-inline">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<p>Circular progress bar with different colour options:</p>

						<div class="progress-circular progress-circular-inline progress-circular-alt">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<div class="progress-circular progress-circular-inline progress-circular-blue">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<div class="progress-circular progress-circular-inline progress-circular-green">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<div class="progress-circular progress-circular-inline progress-circular-purple">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<div class="progress-circular progress-circular-inline progress-circular-red">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<div class="progress-circular progress-circular-inline progress-circular-yellow">

							<div class="progress-circular-wrapper">

								<div class="progress-circular-inner">

									<div class="progress-circular-left">

										<div class="progress-circular-spinner"></div>

									</div>

									<div class="progress-circular-gap"></div>

									<div class="progress-circular-right">

										<div class="progress-circular-spinner"></div>

									</div>

								</div>

							</div>

						</div>

						<h2 class="content-sub-heading">Determinate Progress Bars</h2>

						<p>Default progress bar inherits link colour (<code>$link-color</code>):</p>

						<div class="progress">

							<div class="progress-bar" style="width: 20%"></div>

						</div>

						<p>Progress bar with different colour options:</p>

						<div class="progress progress-alt">

							<div class="progress-bar" style="width: 30%"></div>

						</div>

						<div class="progress progress-blue">

							<div class="progress-bar" style="width: 40%"></div>

						</div>

						<div class="progress progress-green">

							<div class="progress-bar" style="width: 50%"></div>

						</div>

						<div class="progress progress-purple">

							<div class="progress-bar" style="width: 60%"></div>

						</div>

						<div class="progress progress-red">

							<div class="progress-bar" style="width: 70%"></div>

						</div>

						<div class="progress progress-yellow">

							<div class="progress-bar" style="width: 80%"></div>

						</div>

						<h2 class="content-sub-heading">Indeterminate Progress Bars</h2>

						<div class="progress">

							<div class="progress-bar-indeterminate"></div>

						</div>

						<h2 class="content-sub-heading">Load Bars</h2>

						<p>A <code>.load-bar</code> requires four different colours (i.e. four <code>&lt;div class="load-bar-progress"&gt;</code> with different colour classes) to achieve the best visual effect. By default, a <code>.load-bar-progress</code> inherits link colour (<code>$link-color</code>).</p>

						<p>A complete load bar consists of two separate <code>.load-bar</code>s, and the order of <code>.load-bar-progress</code>s in each of the two <code>.load-bar</code>s will be different.</p>

						<div class="progress">

							<div class="load-bar">

								<div class="load-bar-base">

									<div class="load-bar-content">

										<div class="load-bar-progress"></div>

										<div class="load-bar-progress load-bar-progress-alt"></div>

										<div class="load-bar-progress load-bar-progress-purple"></div>

										<div class="load-bar-progress load-bar-progress-red"></div>

									</div>

								</div>

							</div>

							<div class="load-bar">

								<div class="load-bar-base">

									<div class="load-bar-content">

										<div class="load-bar-progress"></div>

										<div class="load-bar-progress load-bar-progress-red"></div>

										<div class="load-bar-progress load-bar-progress-purple"></div>

										<div class="load-bar-progress load-bar-progress-alt"></div>

									</div>

								</div>

							</div>

						</div>

						<h2 class="content-sub-heading">Loading Additional Content Examples</h2>

						<p>Combine <code>.el-loading</code> with progress bars or text on any elements or <code>body</code> to indicate additional content is being loaded. Add <code>.el-loading-done</code> using custom javascript when content has been loaded to remove loading indicators.</p>

						<div class="el-loading" id="el-loading-1">

							<div class="el-loading-indicator">

								<div class="progress-circular progress-circular-inline progress-circular-">

									<div class="progress-circular-wrapper">

										<div class="progress-circular-inner">

											<div class="progress-circular-left">

												<div class="progress-circular-spinner"></div>

											</div>

											<div class="progress-circular-gap"></div>

											<div class="progress-circular-right">

												<div class="progress-circular-spinner"></div>

											</div>

										</div>

									</div>

								</div>

							</div>

							<div class="tile-wrap">

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

							</div>

						</div>

						<p class="text-right"><a class="btn finish-loading" data-target="#el-loading-1">Finish Loading</a></p>

						<div class="el-loading" id="el-loading-2">

							<div class="el-loading-indicator">

								<div class="progress progress-position-absolute-top">

									<div class="progress-bar-indeterminate"></div>

								</div>

							</div>

							<div class="tile-wrap">

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

							</div>

						</div>

						<p class="text-right"><a class="btn finish-loading" data-target="#el-loading-2">Finish Loading</a></p>

						<div class="el-loading" id="el-loading-3">

							<div class="el-loading-indicator">

								<div class="progress progress-position-absolute-bottom">

									<div class="load-bar">

										<div class="load-bar-base">

											<div class="load-bar-content">

												<div class="load-bar-progress"></div>

												<div class="load-bar-progress load-bar-progress-alt"></div>

												<div class="load-bar-progress load-bar-progress-purple"></div>

												<div class="load-bar-progress load-bar-progress-red"></div>

											</div>

										</div>

									</div>

									<div class="load-bar">

										<div class="load-bar-base">

											<div class="load-bar-content">

												<div class="load-bar-progress"></div>

												<div class="load-bar-progress load-bar-progress-red"></div>

												<div class="load-bar-progress load-bar-progress-purple"></div>

												<div class="load-bar-progress load-bar-progress-alt"></div>

											</div>

										</div>

									</div>

								</div>

							</div>

							<div class="tile-wrap">

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

								<div class="tile">

									<div class="tile-inner">

										<span>placeholder tile</span>

									</div>

								</div>

							</div>

						</div>

						<p class="text-right"><a class="btn finish-loading" data-target="#el-loading-3">Finish Loading</a></p>

						<div class="tile-wrap" id="el-loading-tile-wrap">

							<div class="tile tile-collapse">

								<div class="tile-toggle" data-parent="#el-loading-tile-wrap" data-target="#el-loading-tile-collapse-1" data-toggle="tile">

									<div class="tile-inner">

										<div class="text-overflow">click to expand this tile</div>

									</div>

								</div>

								<div class="tile-active-show collapse" id="el-loading-tile-collapse-1">

									<div class="el-loading">

										<div class="el-loading-indicator el-loading-indicator-linear">

											<div class="progress progress-position-absolute-top">

												<div class="progress-bar-indeterminate"></div>

											</div>

										</div>

									</div>

								</div>

							</div>

							<div class="tile tile-collapse">

								<div class="tile-toggle" data-parent="#el-loading-tile-wrap" data-target="#el-loading-tile-collapse-2" data-toggle="tile">

									<div class="tile-inner">

										<div class="text-overflow">click to expand this tile</div>

									</div>

								</div>

								<div class="tile-active-show collapse" id="el-loading-tile-collapse-2">

									<div class="el-loading">

										<div class="el-loading-indicator el-loading-indicator-linear">

											<div class="progress progress-position-absolute-top">

												<div class="progress-bar-indeterminate"></div>

											</div>

										</div>

									</div>

								</div>

							</div>

							<div class="tile tile-collapse">

								<div class="tile-toggle" data-parent="#el-loading-tile-wrap" data-target="#el-loading-tile-collapse-3" data-toggle="tile">

									<div class="tile-inner">

										<div class="text-overflow">click to expand this tile</div>

									</div>

								</div>

								<div class="tile-active-show collapse" id="el-loading-tile-collapse-3">

									<div class="el-loading">

										<div class="el-loading-indicator el-loading-indicator-linear">

											<div class="progress progress-position-absolute-top">

												<div class="progress-bar-indeterminate"></div>

											</div>

										</div>

									</div>

								</div>

							</div>

						</div>

						<p><code>.avoid-fout</code> on HTML pages uses a similar technique to avoid flash of unstyled text (FOUT). <code>.avoid-fout-done</code> is added when <code>Roboto</code> font either is successfully loaded or fails to load. <code>.avoid-fout</code> also can be used on any HTML elements.</p>

					</section>

				</div>

			</div>

		</div>

	</div>

	<footer class="footer">

		<div class="container">

			<p>Material</p>

		</div>

	</footer>

	<div class="fbtn-container">

		<div class="fbtn-inner">

			<a class="fbtn fbtn-red fbtn-lg" data-toggle="dropdown"><span class="fbtn-text">Links</span><span class="fbtn-ori icon">add</span><span class="fbtn-sub icon">close</span></a>

			<div class="fbtn-dropdown">

				<a class="fbtn" href="https://github.com/Daemonite/material" target="_blank"><span class="fbtn-text">Fork me on GitHub</span><span class="fa fa-github"></span></a>

				<a class="fbtn fbtn-blue" href="https://twitter.com/daemonites" target="_blank"><span class="fbtn-text">Follow Daemon on Twitter</span><span class="fa fa-twitter"></span></a>

				<a class="fbtn fbtn-alt" href="http://www.daemon.com.au/" target="_blank"><span class="fbtn-text">Visit Daemon Website</span><span class="icon">link</span></a>

			</div>

		</div>

	</div>



	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>

	<script src="js/base.min.js"></script>



	<!-- documentation extra javascript -->

	<script type="text/javascript">

		$('.finish-loading').on('click', function(e) {

			e.stopPropagation();

			$($(this).attr('data-target')).addClass('el-loading-done');

		});

	</script>

	<script type="text/javascript">

		var timer;



		$('#el-loading-tile-wrap .tile-active-show').on('hide.bs.collapse', function(e) {

			clearTimeout(timer);

		});



		$('#el-loading-tile-wrap .tile-active-show').on('show.bs.collapse', function(e) {

			var $this = $(this);



			if (!$('.el-loading', $this).hasClass('el-loading-done')) {

				timer = setTimeout(function() {

					$('.el-loading', $this).addClass('el-loading-done');

					$this.prepend('<div class="tile-sub"><p>Additional information<br><small>Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.</small></p></div>');

				}, 6000);

			};

		});

	</script>

</body>

</html>
1
https://gitee.com/gaobo.xiao/materialUI.git
git@gitee.com:gaobo.xiao/materialUI.git
gaobo.xiao
materialUI
materialUI
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部