Vertical Progress Bar - CSS tricks

Ask for Help
1

Screenshot 2022-06-11 at 11.08.10 PM
Screenshot 2022-06-11 at 11.08.10 PM460×870 31 KB

A vertical progress bar with steps title and description

CSS:

<pre><style>
.wrapper {
	 width: 330px;
	 font-family: 'Helvetica';
	 font-size: 14px;
}
 .StepProgress {
	 position: relative;
	 padding-left: 45px;
	 list-style: none;
}
 .StepProgress::before {
	 display: inline-block;
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 15px;
	 width: 10px;
	 height: 100%;
}
 .StepProgress-item {
	 position: relative;
	 counter-increment: list;
}
 .StepProgress-item:not(:last-child) {
	 padding-bottom: 20px;
}
 .StepProgress-item::before {
	 display: inline-block;
	 content: '';
	 position: absolute;
	 left: -30px;
	 height: 100%;
	 width: 10px;
}
 .StepProgress-item::after {
	 content: '';
	 display: inline-block;
	 position: absolute;
	 top: 0;
	 left: -37px;
	 width: 20px;
	 height: 20px;
	 border: 2px solid #CCC;
	 border-radius: 50%;
	 background-color: #FFF;
}
 .StepProgress-item.is-done::before {
	 border-left: 2px solid green;
}
 .StepProgress-item.is-done::after {
	 content: "✔";
	 font-size: 13px;
	 color: #FFF;
	 text-align: center;
	 border: 2px solid green;
	 background-color: green;
}
 .StepProgress-item.current::before {
	 border-left: 2px solid green;
}
 .StepProgress-item.current::after {
	 content: counter(list);
	 padding-top: 1px;
	 width: 25px;
	 height: 25px;
	 top: -4px;
	 left: -40px;
	 font-size: 14px;
	 text-align: center;
	 color: green;
	 border: 2px solid green;
	 background-color: white;
}
 .StepProgress strong {
	 display: block;
}
</style>

The Main Div Element:

<div style="margin-left:10px">
<div class="wrapper">
<ul class="StepProgress">
  <div class="StepProgress-item is-done"><strong>Post a contest</strong></div>
  <div class="StepProgress-item is-done"><strong>Award an entry</strong>
    Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
  </div>
  <div class="StepProgress-item is-done"><strong>Post a contest</strong></div>
  <div class="StepProgress-item is-done"><strong>Handover</strong></div>
  <div class="StepProgress-item current"><strong>Provide feedback</strong></div>
</ul>
</div>
</div>

If you need help setting it up, DM me!

Also, use two rich texts so the div can be put in a ITE and can be used in RichText Element

14 Likes
2

Nice! I did one a while ago using an inline list (so that it would be interactive) and CSS:

CleanShot 2022-06-11 at 14.06.22@2x
CleanShot 2022-06-11 at 14.06.22@2x712×900 87.3 KB

Mine was more smoke and mirrors though…

<div class="pipe"></div>
<div class="pipe2"></div>

<pre><span><style>

[role="row"]:nth-of-type(-n+2) .textStyle {
color: lightgrey;
}

.pipe {
height: 400px;
position: fixed;
z-index: -1;
top: 0;
border-left: double 6px #ff8d81 !important;
transform: translate(21px,240px);
}
.pipe2 {
height: 150px;
position: fixed;
z-index: -1;
top: 0;
border-left: solid 6px #ff8d81 !important;
transform: translate(21px,240px);
}

[data-test="list-item-image"] {
border: solid 3px #ff8d81;
margin-right: 20px !important;
//margin-left: -42px !important;
}

.separator::after {
margin-left: 26px;
}

[data-test="list-item-subtitle"] {
margin-bottom: 15px;
padding-right: 30px !important;
}

[data-test="list-item-title"] {
margin-top: 15px;
}
/*
[data-test="list-item"] {
border-left: solid 6px #ff8d81 !important;
left: 30px;
}
11 Likes
3

This is beautiful.

4

Thanks both for sharing!

5

Love it! Both examples serve a different purpose and both look great!