# Vertical Progress Bar - CSS tricks

**URL:** <https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [June 11, 2022, 5:42pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977 "2022-06-11T17:42:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShantanuIyengar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shantanuiyengar/32/35546_2.png) [@ShantanuIyengar](https://community.glideapps.com/u/ShantanuIyengar)\
**Post date:** [June 11, 2022, 5:42pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977/1 "2022-06-11T17:42:24Z")

</div>

![Screenshot 2022-06-11 at 11.08.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb35f56f8e9b22e3c9f9fbdd84d2d8de4a4044d8.png)

A vertical progress bar with steps title and description

**CSS:**

```auto
<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:**

```auto
<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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 11, 2022, 6:10pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977/2 "2022-06-11T18:10:10Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/831c7520641ac8035cd3f445e613a563636c1fad.png)

Mine was more smoke and mirrors though…

```auto
<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;
}

```

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 11, 2022, 10:59pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977/3 "2022-06-11T22:59:41Z")

</div>

This is beautiful.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 11, 2022, 11:07pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977/4 "2022-06-11T23:07:21Z")

</div>

Thanks both for sharing!

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [June 11, 2022, 11:23pm UTC](https://community.glideapps.com/t/vertical-progress-bar-css-tricks/42977/5 "2022-06-11T23:23:57Z")

</div>

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