CODEWITHSUNDEEP
htmlcssprogress
Code Monkey
Code Monkey

Reputation: 17

css progress indicator with arrows

i need help, i am trying to replicate this kind of progress indicator, but i can't figure it out.

What i want:

enter image description here

What i have: http://jsfiddle.net/AQWdM/

body {
  font-family: 'Segoe UI';
  font-size: 13px;
}

ul.progress li.active {
  background-color: #dc9305;
}

ul.progress li {
  background-color: #7e7e7e;
}

ul.progress {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.progress li {
  float: left;
  line-height: 20px;
  height: 20px;
  min-width: 130px;
  position: relative;
}

ul.progress li:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 4px;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #7e7e7e;
}

ul.progress li:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 0px;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
}

ul.progress li.beforeactive:before {
  background-color: #dc9305;
}

ul.progress li.active:before {
  background-color: #7e7e7e;
}

ul.progress li.active:after {
  border-color: transparent transparent transparent #dc9305;
}

ul.progress li:last-child:after,
ul.progress li:last-child:before {
  border: 0;
}

ul.progress li a {
  padding: 0px 0px 0px 6px;
  color: #FFF;
  text-decoration: none;
}
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li class="beforeactive"><a href="">Develop</a></li>
  <li class="active"><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>

First, my example has "beforeactive" class - i would like to avoid this, so i can just mark item as active. Also, arrows on my example are not best set up - on image where is what i want, it has better set up arrows (the are more thick at starting).

I need your help to:

1.) Create better css, clearly i am not good at css, so not to require beforeactive class, also to properly color backgrounds, and to be optimized - there can be hundrets of this lists per page

2.) Create arrow to match the one on the design i want to have

3.) It needs to be dynamic, since sometimes it will be small, somtimes it will be large, it needs to be able to cope with different font sizes (maybe use em or percentage - i used px just to test stuff)

4.) IF - AND ONLY IF IS POSSIBLE SIMPLE WAY - to make it for example whole long 600px; and current active one is longest, others have fixed size, and the active one always fills up the rest of it. So if first is active, it takes 400px, and rest fill in 200px, when we activate second, to animate making others size down, and second one size up. I use jquery, so it's ok to use his anymations, but i prefer css animations (there will be thousands of lines of javascript code - so i try to use javascript as little as possible for ui)

Thank you

Upvotes: 1

Views: 5427

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105923

You should use one pseudo rotated element and draw it on the far left side. the first will be out of sight, so no need to worry about last li, set overflow on ul to hide overflowing parts :).

DEMO and CSS

body {
  font-family: 'Segoe UI';
  font-size: 13px;
}

ul.progress li.active {
  background-color: #dc9305;
}

ul.progress li {
  background-color: #7e7e7e;
  position: relative;
  text-indent: 0.5em;
}

ul.progress li:after {
  content: '';
  position: absolute;
  right: 100%;
  margin-right: 0.4em;
  width: 1.2em;
  padding-top: 1.2em;
  ;
  border: solid white;
  z-index: 1;
  transform: rotate(45deg);
  border-bottom: 0;
  border-left: 0;
  box-shadow: 5px -5px 0 3px #7e7e7e
}

ul.progress li.active:after {
  box-shadow: 6px -6px 0 3px #dc9305;
}

ul.progress {
  list-style: none;
  margin:2px 0;
  padding: 0;
  overflow: hidden;
  min-width:max-content;
}

ul.progress li {
  float: left;
  line-height: 20px;
  height: 20px;
  min-width: 130px;
  position: relative;
  transition: min-width 0.5s;
}

ul.progress li a {
  padding: 0px 0px 0px 6px;
  color: #FFF;
  text-decoration: none;
}

ul.progress li:hover {
  min-width: 300px;
}

ul.progress li:before {
  content: '\2714'
}

ul.progress li.active:before,
ul.progress li.active~li:before {
  content: ''
}
<ul class="progress">
  <li class="active"><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li class="active"><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li class="active"><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li class="active"><a href="">Close</a></li>
</ul>

Do not forget to add vendor-prefix or use a script to care of it.

over li to see them grow with transition, check marks added too via CSS to li ahead .active class

Upvotes: 3

codefreaK
codefreaK

Reputation: 3662

Check this out

Please check this and see is this what you were looking for

<ul class="progress">
    <li><a href="">✔ Qualify</a></li>
    <li class="beforeactive"><a href=""> ✔ Develop</a></li>
    <li class="active"><a href="">Propose</a></li>
    <li><a href="">Close</a></li>
</ul>

Css

body {
    font-family: 'Segoe UI';
    font-size: 13px;
}

ul.progress li.active {
    background-color: #dc9305;
}

ul.progress li {
    background-color: #7e7e7e;
}

ul.progress {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.progress li {
    float: left;
    line-height: 20px;
    height: 20px;
    min-width: 130px;
    position: relative;

}

ul.progress li:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 4px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #7e7e7e;
}

ul.progress li:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #fff;
}

ul.progress li.beforeactive:before {
    background-color: #dc9305;
}

ul.progress li.active:before {
    background-color: #7e7e7e;
}
ul.progress li.active:after {
    border-color: transparent transparent transparent #dc9305;
}

ul.progress li:last-child:after,
ul.progress li:last-child:before {
    border: 0;
}

ul.progress li a {
    padding: 0px 0px 0px 6px;
    color: #FFF;
    text-decoration: none;
}
ul.progress li:hover {

  min-width:300px;

}

Output

O/p

Upvotes: 0

Related Questions