js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added progress bars

Browse Source
This commit is contained in:
Cory LaViska
2017-08-11 16:12:13 -04:00
parent 36063a22d0
commit 1f4c62ec2c
25 changed files with 275 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/alerts.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/attribution.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/badges.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/browser-support.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/buttons.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/content.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/customizing.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/dropdowns.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

5
docs/forms.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>
@@ -120,10 +121,6 @@
<td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
<td><input type="time"></td>
</tr>
<tr>
<td><code>&lt;progress&gt;&lt;/progress&gt;</code></td>
<td><progress max="100" value="50"></progress></td>
</tr>
<tr>
<td><code>&lt;select&gt;</code></td>
<td>

1
docs/grid-system.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/icons.html
View File

@@ -36,6 +36,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/installing.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/loaders.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

126
docs/progress-bars.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="These progress bars are easy to create and render consistently in all browsers.">
<link rel="icon" href="../source/img/favicon.png">
<link rel="stylesheet" href="../dist/shoelace.css">
<link rel="stylesheet" href="../source/css/_docs.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
<title>Progress Bars</title>
</head>
<body>
<header id="head" class="text-center">
<h1>
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
</h1>
<p class="text-muted text-small">
A back to the basics CSS starter kit. For when you don’t need the whole boot.
</p>
</header>
<main id="wrap">
<nav id="nav">
<a href="installing.html">Installing</a>
<a href="customizing.html">Customizing</a>
<a href="content.html">Content</a>
<a href="alerts.html">Alerts</a>
<a href="badges.html">Badges</a>
<a href="buttons.html">Buttons</a>
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>
<a href="utilities.html">Utilities</a>
<a href="grid-system.html">Grid System</a>
<a href="icons.html">Icons</a>
<a href="browser-support.html">Browser Support</a>
<a href="attribution.html">Attribution</a>
</nav>
<div id="content">
<h2 id="progress-bars">Progress Bars</h2>
<p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
<p>Create a progress bar with the following markup. Use the <code>progress-small</code> and <code>progress-big</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
<p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress progress-small&quot;&gt;
&lt;div class=&quot;progress-bar width-25&quot;&gt;25%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-big&quot;&gt;
&lt;div class=&quot;progress-bar width-75&quot;&gt;75%&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress progress-small">
<div class="progress-bar width-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar width-75">75%</div>
</div>
<p>When progress can’t be determined, use the <code>progress-indeterminate</code> modifier to set an indeterminate state.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress progress-indeterminate&quot;&gt;
&lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress progress-indeterminate">
<div class="progress-bar"></div>
</div>
</div>
</main>
<footer id="foot">
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
<p class="text-small text-muted">
Shoelace.css 1.0.0-beta10 &middot;
&copy; A Beautiful Site, LLC
</p>
<p class="margin-y-small text-center">
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
</p>
<p>
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script src="../dist/shoelace.js"></script>
<script>
$(function() {
// Highlight current nav item
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
}
});
});
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>

1
docs/switches.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/tables.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/tabs.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>

1
docs/utilities.html
View File

@@ -35,6 +35,7 @@
<a href="dropdowns.html">Dropdowns</a>
<a href="forms.html">Forms</a>
<a href="loaders.html">Loaders</a>
<a href="progress-bars.html">Progress Bars</a>
<a href="switches.html">Switches</a>
<a href="tabs.html">Tabs</a>
<a href="tables.html">Tables</a>