├── package.json ├── gulpfile.js ├── README.md ├── bower.json ├── .gitignore ├── LICENSE ├── css └── progress-wizard.min.css ├── sass └── progress-wizard.scss └── index.html /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css_progress_wizard", 3 | "version": "2.0.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/christabor/css-progress-wizard.git" 7 | }, 8 | "license": "MIT", 9 | "devDependencies": { 10 | "gulp": "^3.9.0", 11 | "gulp-compress": "0.0.8", 12 | "gulp-concat": "^2.6.0", 13 | "gulp-minify-css": "^1.2.3", 14 | "gulp-sass": "^2.1.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var sass = require('gulp-sass'); 5 | var concat = require('gulp-concat'); 6 | var minifyCss = require('gulp-minify-css'); 7 | 8 | gulp.task('sass', function () { 9 | gulp.src('sass/*.scss') 10 | .pipe(sass().on('error', sass.logError)) 11 | .pipe(concat('progress-wizard.min.css')) 12 | .pipe(minifyCss()) 13 | .pipe(gulp.dest('css/')); 14 | }); 15 | 16 | gulp.task('default', ['sass']); 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![MIT Badge](http://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/christabor/css-progress-wizard/master/LICENSE) 2 | ![Donation badge](https://img.shields.io/gratipay/christabor.svg) 3 | 4 | ## A pure css progress indicator! 5 | * Pure CSS (lightweight, easy to implement) 6 | * Flexbox - easy to update and add more items 7 | * Resizeable/responsive (text-resize, etc... try it!) 8 | * Easy to customize design (sass mixins/variables, etc...) 9 | * Written with SASS 10 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-progress-wizard", 3 | "description": "A pure CSS step progress indicator", 4 | "main": "css/progress-wizard.min.css", 5 | "license": "MIT", 6 | "keywords": [ 7 | "css", 8 | "step", 9 | "progress", 10 | "form", 11 | "wizard", 12 | "flexbox" 13 | ], 14 | "homepage": "https://github.com/christabor/css-progress-wizard", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | *.css.map 10 | 11 | # Packages # 12 | ############ 13 | # it's better to unpack these files and commit the raw source 14 | # git has its own built in compression methods 15 | *.7z 16 | *.dmg 17 | *.gz 18 | *.iso 19 | *.jar 20 | *.rar 21 | *.tar 22 | *.zip 23 | 24 | # Dependencies # 25 | ################ 26 | /.sass-cache 27 | .sass-cache 28 | *.sass-cache 29 | **/config.rb 30 | **/bourbon 31 | 32 | # OS generated files # 33 | ###################### 34 | .DS_Store 35 | .DS_Store? 36 | ._* 37 | .Spotlight-V100 38 | .Trashes 39 | Icon? 40 | ehthumbs.db 41 | Thumbs.db 42 | *.pyc 43 | config 44 | compass 45 | /tmp 46 | /node_modules 47 | /generators 48 | /remote-libs 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Chris Tabor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/progress-wizard.min.css: -------------------------------------------------------------------------------- 1 | .flexer,.progress-indicator{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.no-flexer,.progress-indicator.stacked{display:block}.no-flexer-element{-ms-flex:0;-webkit-flex:0;-moz-flex:0;flex:0}.flexer-element,.progress-indicator>li{-ms-flex:1;-webkit-flex:1;-moz-flex:1;flex:1}.progress-indicator{margin:0 0 1em;padding:0;font-size:80%;text-transform:uppercase}.progress-indicator>li{list-style:none;text-align:center;width:auto;padding:0;margin:0;position:relative;text-overflow:ellipsis;color:#bbb;display:block}.progress-indicator>li:hover{color:#6f6f6f}.progress-indicator>li.completed,.progress-indicator>li.completed .bubble{color:#65d074}.progress-indicator>li .bubble{border-radius:1000px;width:20px;height:20px;background-color:#bbb;display:block;margin:0 auto .5em;border-bottom:1px solid #888}.progress-indicator>li .bubble:after,.progress-indicator>li .bubble:before{display:block;position:absolute;top:9px;width:100%;height:3px;content:'';background-color:#bbb}.progress-indicator>li.completed .bubble,.progress-indicator>li.completed .bubble:after,.progress-indicator>li.completed .bubble:before{background-color:#65d074;border-color:#247830}.progress-indicator>li .bubble:before{left:0}.progress-indicator>li .bubble:after{right:0}.progress-indicator>li:first-child .bubble:after,.progress-indicator>li:first-child .bubble:before{width:50%;margin-left:50%}.progress-indicator>li:last-child .bubble:after,.progress-indicator>li:last-child .bubble:before{width:50%;margin-right:50%}.progress-indicator>li.active,.progress-indicator>li.active .bubble{color:#337AB7}.progress-indicator>li.active .bubble,.progress-indicator>li.active .bubble:after,.progress-indicator>li.active .bubble:before{background-color:#337AB7;border-color:#122a3f}.progress-indicator>li a:hover .bubble,.progress-indicator>li a:hover .bubble:after,.progress-indicator>li a:hover .bubble:before{background-color:#5671d0;border-color:#1f306e}.progress-indicator>li a:hover .bubble{color:#5671d0}.progress-indicator>li.danger .bubble,.progress-indicator>li.danger .bubble:after,.progress-indicator>li.danger .bubble:before{background-color:#d3140f;border-color:#440605}.progress-indicator>li.danger .bubble{color:#d3140f}.progress-indicator>li.warning .bubble,.progress-indicator>li.warning .bubble:after,.progress-indicator>li.warning .bubble:before{background-color:#edb10a;border-color:#5a4304}.progress-indicator>li.warning .bubble{color:#edb10a}.progress-indicator>li.info .bubble,.progress-indicator>li.info .bubble:after,.progress-indicator>li.info .bubble:before{background-color:#5b32d6;border-color:#25135d}.progress-indicator>li.info .bubble{color:#5b32d6}.progress-indicator.stacked>li{text-indent:-10px;text-align:center;display:block}.progress-indicator.stacked>li .bubble:after,.progress-indicator.stacked>li .bubble:before{left:50%;margin-left:-1.5px;width:3px;height:100%}.progress-indicator.stacked .stacked-text{position:relative;z-index:10;top:0;margin-left:60%!important;width:45%!important;display:inline-block;text-align:left;line-height:1.2em}.progress-indicator.stacked>li a{border:none}.progress-indicator.stacked.nocenter>li .bubble{margin-left:0;margin-right:0}.progress-indicator.stacked.nocenter>li .bubble:after,.progress-indicator.stacked.nocenter>li .bubble:before{left:10px}.progress-indicator.stacked.nocenter .stacked-text{width:auto!important;display:block;margin-left:40px!important}@media handheld,screen and (max-width:400px){.progress-indicator{font-size:60%}} -------------------------------------------------------------------------------- /sass/progress-wizard.scss: -------------------------------------------------------------------------------- 1 | /* Copyright 2013-2015 etc Chris Tabor. See https://github.com/christabor/css-progress-wizard/blob/master/LICENSE for details. */ 2 | 3 | // Colors 4 | $pw-incomplete: #bbb !default; 5 | $pw-complete: #65d074 !default; 6 | $pw-active: #337AB7 !default; 7 | $pw-hover: #5671d0 !default; 8 | $pw-step-danger: #d3140f !default; 9 | $pw-step-warning: #edb10a !default; 10 | $pw-step-info: #5b32d6 !default; 11 | 12 | // Sizing 13 | $pw-bubble-size: 20px !default; 14 | $pw-bubble-line-thickness: 3px !default; 15 | $pw-border-thickness: 1px !default; 16 | $pw-darken-amount: 30% !default; 17 | 18 | // Mobile 19 | $pw-mobile-size: 400px !default; 20 | 21 | @mixin bubble-style($color) { 22 | background-color: $color; 23 | color: $color; 24 | border-color: darken($color, $pw-darken-amount); 25 | &:before, 26 | &:after { 27 | background-color: $color; 28 | border-color: darken($color, $pw-darken-amount); 29 | } 30 | } 31 | 32 | .flexer { 33 | display: -webkit-box; 34 | display: -moz-box; 35 | display: -ms-flexbox; 36 | display: -webkit-flex; 37 | display: flex; 38 | } 39 | .no-flexer { 40 | display: block; 41 | } 42 | .no-flexer-element { 43 | -ms-flex: 0; 44 | -webkit-flex: 0; 45 | -moz-flex: 0; 46 | flex: 0; 47 | } 48 | .flexer-element { 49 | -ms-flex: 1; 50 | -webkit-flex: 1; 51 | -moz-flex: 1; 52 | flex: 1; 53 | } 54 | .progress-indicator { 55 | @extend .flexer; 56 | margin: 0; 57 | padding: 0; 58 | font-size: 80%; 59 | text-transform: uppercase; 60 | margin-bottom: 1em; 61 | > li { 62 | @extend .flexer-element; 63 | list-style: none; 64 | text-align: center; 65 | width: auto; 66 | padding: 0; 67 | margin: 0; 68 | position: relative; 69 | text-overflow: ellipsis; 70 | color: $pw-incomplete; 71 | display: block; 72 | &:hover { 73 | color: darken($pw-incomplete, $pw-darken-amount); 74 | } 75 | } 76 | > li .bubble { 77 | border-radius: 1000px; 78 | width: $pw-bubble-size; 79 | height: $pw-bubble-size; 80 | background-color: $pw-incomplete; 81 | display: block; 82 | margin: 0 auto 0.5em auto; 83 | border-bottom: $pw-border-thickness solid darken($pw-incomplete, 20%); 84 | } 85 | 86 | // line connectors 87 | 88 | > li .bubble:before, 89 | > li .bubble:after { 90 | display: block; 91 | position: absolute; 92 | top: $pw-bubble-size / 2 - $pw-border-thickness; 93 | width: 100%; 94 | height: $pw-bubble-line-thickness; 95 | content: ''; 96 | background-color: $pw-incomplete; 97 | } 98 | > li .bubble:before { 99 | left: 0; 100 | } 101 | > li .bubble:after { 102 | right: 0; 103 | } 104 | 105 | > li:first-child .bubble:before, 106 | > li:first-child .bubble:after { 107 | width: 50%; 108 | margin-left: 50%; 109 | } 110 | 111 | > li:last-child .bubble:before, 112 | > li:last-child .bubble:after { 113 | width: 50%; 114 | margin-right: 50%; 115 | } 116 | 117 | 118 | // completed state 119 | 120 | > li.completed { 121 | color: $pw-complete; 122 | .bubble { 123 | @include bubble-style($pw-complete); 124 | } 125 | } 126 | 127 | // current state 128 | 129 | > li.active { 130 | color: $pw-active; 131 | .bubble { 132 | @include bubble-style($pw-active); 133 | } 134 | } 135 | 136 | // button states 137 | 138 | > li a:hover .bubble { 139 | @include bubble-style($pw-hover); 140 | } 141 | 142 | // override states 143 | 144 | > li.danger .bubble { 145 | @include bubble-style($pw-step-danger); 146 | } 147 | > li.warning .bubble { 148 | @include bubble-style($pw-step-warning); 149 | } 150 | > li.info .bubble { 151 | @include bubble-style($pw-step-info); 152 | } 153 | 154 | // stacked version 155 | 156 | &.stacked { 157 | @extend .no-flexer; 158 | > li { 159 | text-indent: -10px; 160 | text-align: center; 161 | display: block; 162 | } 163 | > li .bubble:before, 164 | > li .bubble:after { 165 | left: 50%; 166 | margin-left: -$pw-bubble-line-thickness / 2; 167 | width: $pw-bubble-line-thickness; 168 | height: 100%; 169 | } 170 | .stacked-text { 171 | position: relative; 172 | z-index: 10; 173 | top: 0; 174 | margin-left: 60% !important; 175 | width: 45% !important; 176 | display: inline-block; 177 | text-align: left; 178 | line-height: 1.2em; 179 | } 180 | > li a { 181 | border: none; 182 | } 183 | } 184 | &.stacked.nocenter { 185 | > li .bubble { 186 | margin-left: 0; 187 | margin-right: 0 188 | } 189 | > li .bubble:before, 190 | > li .bubble:after { 191 | left: $pw-bubble-size / 2; 192 | } 193 | .stacked-text { 194 | width: auto !important; 195 | display: block; 196 | margin-left: $pw-bubble-size * 2 !important; 197 | } 198 | } 199 | } 200 | 201 | @media handheld, screen and (max-width: $pw-mobile-size) { 202 | .progress-indicator { 203 | font-size: 60%; 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Progress wizard 7 | 8 | 9 | 10 | 11 | 179 | 180 | 181 |
182 |

183 | (CSS) Progress Wizard
184 | A pure css progress indicator node/vertex thing! 185 |

186 | 193 |

Usage.

194 |

Just add .progress-indicator to any ul or ol. Add bubbles by embedding a <span class="bubble"> in your <li>. See below for an example:

195 | 196 | <ul class="progress-indicator"> 197 | <li class="completed"> 198 | <span class="bubble"></span> 199 | Step 1. 200 | </li> 201 | <li class="completed"> 202 | <span class="bubble"></span> 203 | Step 2. 204 | </li> 205 | <li class="completed"> 206 | <span class="bubble"></span> 207 | Step 3. 208 | </li> 209 | <li class="completed"> 210 | <span class="bubble"></span> 211 | Step 4. 212 | </li> 213 | <li> 214 | <span class="bubble"></span> 215 | Step 5. 216 | </li> 217 | </ul> 218 | 219 |

Examples

220 |

Basic.

221 | 243 | 265 | 266 |

Moderate

267 |

Toss in some Font Awesome icons to mix things up.

268 | 292 | 318 | 319 |

Complex

320 | 344 | 374 |

States

375 | 394 |
395 |

Other uses!

396 |

If you want to stack things up, you can use it for all kinds of things, like timelines. Just add .stacked to the container.

397 |

Note: in order to keep text looking good, add the <span class="stacked-text">Text Label</span> to all of your text blocks in each node, which can be styled however you like.

398 | 437 | 476 | 477 |
478 |

How about a speaker timeline?

479 | 520 |
521 | 522 |

No centering in the container

523 |

To disable centering and margins that auto-center the timeline, just add .nocenter To the ul/ol. Note: depending on your icons and text, you may want to massage the alignment for your content.

524 | 549 |
550 | 551 | 552 | 553 | --------------------------------------------------------------------------------