NigelOToole / Progress Tracker
Licence: mit
A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.
Stars: ✭ 461
Projects that are alternatives of or similar to Progress Tracker
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+55.31%)
Mutual labels: scss, sass, flexbox
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (-42.95%)
Mutual labels: scss, sass, flexbox
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-66.59%)
Mutual labels: scss, sass, flexbox
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+30.59%)
Mutual labels: scss, sass, flexbox
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133 (-71.15%)
Mutual labels: scss, sass, flexbox
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-66.38%)
Mutual labels: scss, sass, flexbox
Almace Scaffolding
AMSF, a.k.a. Almace Scaffolding, a super-fast Jekyll framework fighting against the website obesity.
Stars: ✭ 275 (-40.35%)
Mutual labels: scss, sass
Styled Components Theme
Defines themes via flexible color selectors for use with styled-components
Stars: ✭ 302 (-34.49%)
Mutual labels: scss, sass
Devportfolio
A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass
Stars: ✭ 3,582 (+677.01%)
Mutual labels: scss, sass
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (-26.46%)
Mutual labels: scss, sass
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-41%)
Mutual labels: scss, sass
Oruga
🐛 Oruga is a lightweight library of UI components without CSS framework dependency
Stars: ✭ 297 (-35.57%)
Mutual labels: scss, sass
Sass Deprecate
Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers
Stars: ✭ 265 (-42.52%)
Mutual labels: scss, sass
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (-28.85%)
Mutual labels: scss, sass
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Stars: ✭ 380 (-17.57%)
Mutual labels: scss, sass
Magento2 Theme Blank Sass
SASS based version of Magento 2 Blank theme
Stars: ✭ 373 (-19.09%)
Mutual labels: scss, sass
SASS Progress Tracker
A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.
View demo
Installation
$ npm install progress-tracker --save
Import
After installation you can import it into your Sass files with the statement below.
@import "node_modules/progress-tracker/src/styles/progress-tracker.scss";
The JS that is part of this site is just for demonstration purposes, add your own JS as needed to toggle the classes for the step states.
Markup
Follow the HTML code example below for basic usage; each demo sets the first two steps as complete, the third step as active and the last two steps as inactive.
For additional styles add modifier classes and additional markup as needed in the examples below. You can add multiple modifier classes to achieve additional styles that those shown below.
<ul class="progress-tracker">
<li class="progress-step is-complete">
<div class="progress-marker"></div>
</li>
<li class="progress-step is-complete">
<div class="progress-marker"></div>
</li>
<li class="progress-step is-active">
<div class="progress-marker"></div>
</li>
<li class="progress-step">
<div class="progress-marker"></div>
</li>
<li class="progress-step">
<div class="progress-marker"></div>
</li>
</ul>
Demo site
Clone or download from Github.
$ npm install
$ gulp serve
License
MIT © Nigel O Toole
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].