# CSS for progress during onboarding

**URL:** <https://community.glideapps.com/t/css-for-progress-during-onboarding/34632>\
**Category:** Project Showcase\
**Created:** [November 16, 2021, 11:34pm UTC](https://community.glideapps.com/t/css-for-progress-during-onboarding/34632 "2021-11-16T23:34:16Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [November 16, 2021, 11:34pm UTC](https://community.glideapps.com/t/css-for-progress-during-onboarding/34632/1 "2021-11-16T23:34:16Z")

</div>

Wanted to showcase this pretty progress bar for onboarding:

![2021-11-16 17.12.25](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a31fb197bdee0556d41eebc33adb2848ba46e65b.gif)

The code below is from the second screen:

```auto
<center style="font-size: 28px; color:#FF8D81;">
<span style="opacity:20%;" >⦁ &ensp;</span><span style="opacity:100%;" >⦁ &ensp;<span style="opacity:20%;" >⦁&ensp; ⦁
<pre><span><style>
[data-test="app-markdown-view"] {
position: fixed;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
}

```

---

<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:** [November 16, 2021, 11:48pm UTC](https://community.glideapps.com/t/css-for-progress-during-onboarding/34632/2 "2021-11-16T23:48:37Z")

</div>

Should I make a new “Beautiful Design Apps” thread for stuff like this?