progress-tracker
Version:
Illustrate the steps in a multi step process like a form or a timeline.
492 lines (400 loc) • 18.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress Tracker - Illustrate the steps in a multi step process like a form or a timeline</title>
<meta name="description" content="Illustrate the steps in a multi step process like a form or a timeline">
<meta property="og:title" content="Progress Tracker">
<meta property="og:description" content="Illustrate the steps in a multi step process like a form or a timeline">
<meta property="og:site_name" content="Progress Tracker">
<meta property="og:url" content="https://nigelotoole.github.io/progress-tracker/">
<meta property="og:image" content="https://nigelotoole.github.io/progress-tracker/images/progress-tracker-social.png">
<meta property="og:image:alt" content="Progress Tracker">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/progress-tracker.css">
</head>
<body>
<header class="header fullwidth space--sm">
<div class="container">
<h1 class="logo-text">Progress Tracker</h1>
<nav class="nav header-nav">
<a href="https://github.com/NigelOToole/progress-tracker/archive/master.zip" class="btn btn--green btn--ghost"><span>Download</span></a>
<a href="https://github.com/NigelOToole/progress-tracker" class="btn btn--green btn--ghost"><span>GitHub <svg class="icon" aria-hidden="true" viewbox="0 0 24 24"><path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z"/></svg></span></a>
</nav>
</div>
</header>
<main id="main" class="main">
<section class="fullwidth intro">
<div class="container content flow">
<div class="heading page-intro">
<h2 class="page-heading">Show the steps in a multi step process like a form or a timeline.</h2>
<img src="images/progress-tracker-logo.svg" class="page-intro-img" width="80" height="80" alt="Progress Tracker logo">
</div>
<h3>Features</h3>
<ul class="columns-sm-2">
<li>Horizontal or vertical alignment to the start, center or end</li>
<li>Reverse the text position</li>
<li>Spaced, Square, Dashed, Counter and Inline variants</li>
</ul>
</div>
</section>
<section class="fullwidth demos">
<div class="container content flow">
<h2>Demos</h2>
<h3>Markers</h3>
<section class="demo">
<ol class="progress-tracker">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--spaced">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--dashed-even">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--dashed">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--marker-counter">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--marker-dataset">
<li class="progress-step is-complete" data-text="A1"></li>
<li class="progress-step is-complete" data-text="A2"></li>
<li class="progress-step is-active" aria-current="step" data-text="X"></li>
<li class="progress-step" data-text="✓"></li>
<li class="progress-step" data-text="😃"></li>
</ol>
</section>
<section class="demo">
<ol class="progress-tracker progress-tracker--marker-square">
<li class="progress-step is-complete"></li>
<li class="progress-step is-complete"></li>
<li class="progress-step is-active" aria-current="step"></li>
<li class="progress-step"></li>
<li class="progress-step"></li>
</ol>
</section>
<div class="section-heading">
<h3>Markers with text</h3>
<div class="class-update" data-target=".demo--text .progress-tracker">
<div class="class-update-item">
<label for="class-update-demo-text-inline">Inline align: </label>
<select id="class-update-demo-text-inline" class="select">
<option value="" selected>Start</option>
<option value="progress-tracker--center">Center</option>
<option value="progress-tracker--end">End</option>
</select>
</div>
<div class="class-update-item">
<label for="class-update-demo-text-block">Block align: </label>
<select id="class-update-demo-text-block" class="select">
<option value="" selected>Default</option>
<option value="progress-tracker--reverse">Reverse</option>
</select>
</div>
<div class="class-update-item">
<label for="class-update-demo-text-variant">Variant: </label>
<select id="class-update-demo-text-variant" class="select">
<option value="" selected>Default</option>
<option value="progress-tracker--dashed">Dashed</option>
<option value="progress-tracker--dashed-even">Dashed even</option>
<option value="progress-tracker--spaced">Spaced</option>
<option value="progress-tracker--marker-square">Square</option>
</select>
</div>
</div>
</div>
<section class="demo demo--text">
<ol class="progress-tracker">
<li class="progress-step is-complete">
<div class="progress-text">
<h4 class="progress-title">Step 1</h4>
<p>Text explaining this step to the user.</p>
</div>
</li>
<li class="progress-step is-active" aria-current="step">
<div class="progress-text">
<h4 class="progress-title">Step 2</h4>
<p>Text explaining this step to the user.</p>
</div>
</li>
<li class="progress-step" aria-current="step">
<div class="progress-text">
<h4 class="progress-title">Step 3</h4>
<p>Shorter text explanation.</p>
</div>
</li>
</ol>
</section>
<h3>Animation</h3>
<section class="demo demo--anim">
<ol class="progress-tracker progress-tracker--anim">
<li class="progress-step">
<button class="progress-text">
<h4 class="progress-title">Step 1</h4>
<p>Text explaining this step to the user.</p>
</button>
</li>
<li class="progress-step">
<button class="progress-text">
<h4 class="progress-title">Step 2</h4>
<p>Text explaining this step to the user.</p>
</button>
</li>
<li class="progress-step" aria-current="step">
<button class="progress-text">
<h4 class="progress-title">Step 3</h4>
<p>Shorter text explanation.</p>
</button>
</li>
</ol>
</section>
<h3>Inline text</h3>
<section class="demo demo--inline">
<ol class="progress-tracker progress-tracker--inline">
<li class="progress-step is-complete">
<div class="progress-text">
<h4 class="progress-title">Step 1</h4>
</div>
</li>
<li class="progress-step is-active" aria-current="step">
<div class="progress-text">
<h4 class="progress-title">Step 2</h4>
</div>
</li>
<li class="progress-step">
<div class="progress-text">
<h4 class="progress-title">Step 3</h4>
</div>
</li>
</ol>
</section>
<section class="demo demo--inline">
<ol class="progress-tracker progress-tracker--inline progress-tracker--inline-text-end">
<li class="progress-step is-complete">
<div class="progress-text">
<h4 class="progress-title">Step 1</h4>
</div>
</li>
<li class="progress-step is-active" aria-current="step">
<div class="progress-text">
<h4 class="progress-title">Step 2</h4>
</div>
</li>
<li class="progress-step">
<div class="progress-text">
<h4 class="progress-title">Step 3</h4>
</div>
</li>
</ol>
</section>
<div class="section-heading">
<h3>Vertical</h3>
<div class="class-update" data-target=".demo--vertical .progress-tracker">
<div class="class-update-item">
<label for="class-update-demo-vertical-inline">Inline align: </label>
<select id="class-update-demo-vertical-inline" class="select">
<option value="" selected>Start</option>
<option value="progress-tracker--center">Center</option>
<option value="progress-tracker--end">End</option>
</select>
</div>
<div class="class-update-item">
<label for="class-update-demo-vertical-variant">Variant: </label>
<select id="class-update-demo-vertical-variant" class="select">
<option value="" selected>Default</option>
<option value="progress-tracker--dashed">Dashed</option>
<option value="progress-tracker--dashed-even">Dashed even</option>
<option value="progress-tracker--spaced">Spaced</option>
<option value="progress-tracker--marker-square">Square</option>
</select>
</div>
</div>
</div>
<section class="demo demo--vertical">
<ol class="progress-tracker progress-tracker--vertical">
<li class="progress-step is-complete">
<div class="progress-text">
<h4 class="progress-title">Step 1</h4>
<p>Text explaining this step to the user.</p>
</div>
</li>
<li class="progress-step is-active" aria-current="step">
<div class="progress-text">
<h4 class="progress-title">Step 2</h4>
<p>Text explaining this step to the user.</p>
</div>
</li>
<li class="progress-step">
<div class="progress-text">
<h4 class="progress-title">Step 3</h4>
<p>Shorter text explanation.</p>
</div>
</li>
</ol>
</section>
</div>
</section>
<section id="docs" class="fullwidth docs">
<div class="container content flow">
<h2 id="docs-installation">Installation</h2>
<pre><code class="scroll-shadow-inline" tabindex="0">$ npm install progress-tracker --save-dev</code></pre>
<h2 id="docs-usage">Usage</h2>
<p>Add the CSS into your project and add the elements to your HTML.</p>
<h3 id="docs-markup">Markup</h3>
<pre><code class="scroll-shadow-inline" tabindex="0"><ol class="progress-tracker">
<li class="progress-step is-complete">
<div class="progress-text"> ... </div>
</li>
<li class="progress-step is-active" aria-current="step">
<div class="progress-text"> ... </div>
</li>
<li class="progress-step">
<div class="progress-text"> ... </div>
</li>
</ol>
</code></pre>
<h3 id="docs-options">Options</h3>
<p>Customize the appearance of the element by adding the variant classes as needed.</p>
<div class="table-outer scroll-shadow-inline" tabindex="0">
<table class="table">
<tbody><tr>
<th>Class</th>
<th>Description</th>
</tr>
<tr>
<td>progress-tracker</td>
<td>Default layout, start aligned.</td>
</tr>
<tr>
<td>progress-tracker--center</td>
<td>Center aligned layout.</td>
</tr>
<tr>
<td>progress-tracker--end</td>
<td>End aligned layout.</td>
</tr>
<tr>
<td>progress-tracker--reverse</td>
<td>Reversed layout, i.e. text on top.</td>
</tr>
<tr>
<td>progress-tracker--marker-counter</td>
<td>Adds a numberic counter to the marker.</td>
</tr>
<tr>
<td>progress-tracker--marker-dataset</td>
<td>Adds text to the marker from data-text on the step.</td>
</tr>
<tr>
<td>progress-tracker--spaced</td>
<td>Space added around markers.</td>
</tr>
<tr>
<td>progress-tracker--dashed</td>
<td>Path is dashed to a set size i.e. each dash is the same size.</td>
</tr>
<tr>
<td>progress-tracker--dashed-even</td>
<td>Path is dashed to a fill the space i.e. dash size is dynamic based on available space.</td>
</tr>
<tr>
<td>progress-tracker--marker-square</td>
<td>Square marker shape.</td>
</tr>
<tr>
<td>progress-tracker--anim</td>
<td>Allows animation of path.</td>
</tr>
<tr>
<td>progress-tracker--inline</td>
<td>Marker text is inline with the marker.</td>
</tr>
<tr>
<td>progress-tracker--inline-end</td>
<td>As above but text is at the end of the marker.</td>
</tr>
<tr>
<td>progress-tracker--vertical</td>
<td>Vertically aligned layout.</td>
</tr>
</tbody></table>
</div>
<h2 id="docs-compatibility">Compatibility</h2>
<p>Supports all modern browsers at the time of release.</p>
<h2 id="docs-demo-site">Demo site</h2>
<p>Clone the repo from Github and run the commands below.</p>
<pre><code class="scroll-shadow-inline" tabindex="0">$ npm install
$ npm run dev
</code></pre>
</div>
</section>
</main>
<footer class="fullwidth space--sm footer">
<div class="container content">
<div class="group share">
<h4 class="share-title">Share this</h4>
<share-url text-selector="span" maintain-size="true">
<button class="btn btn--icon-multi">
<span>Share link</span>
<svg class="icon" aria-hidden="true" viewbox="0 0 24 24"><path d="m3.293 11.293 1.414 1.414L11 6.414V20h2V6.414l6.293 6.293 1.414-1.414L12 2.586l-8.707 8.707z"/></svg>
<svg class="icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg>
</button>
</share-url>
<share-url action="clipboard" text-success="Copied" text-selector="span" maintain-size="true">
<button class="btn btn--icon-multi share-url">
<span>Copy link</span>
<svg class="icon" viewbox="0 0 24 24"><rect x="8" y="3" width="13" height="13" rx="0" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></rect><path d="M4 7v12c0 .6.4 1 1 1h12" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></path></svg>
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg>
</button>
</share-url>
</div>
<nav class="nav footer-nav">
<a href="http://www.purestructure.com/nigelotoole" rel="author">Made by Nigel O Toole</a>
<a href="https://github.com/nigelotoole" rel="external">GitHub</a>
<a data-encode="bWFpbHRvOnB1cmVAcHVyZXN0cnVjdHVyZS5jb20" data-encode-attribute="href" class="encode">Email</a>
<a href="http://www.purestructure.com" rel="external" class="w-100">PURE STRUCTURE</a>
</nav>
</div>
</footer>
<script src="scripts/main.js" type="module"></script>
<script src="scripts/share-url-wc.js" type="module"></script>
</body>
</html>