Statu Flow Circle с несколькими строками с использованием CSS и HTML

Question

.multilinePhases {
    display: flow-root;
}
.entityOverviewphase {
    position: relative;
    height: 30px;
}
.entityOverviewphaseleve {
    /* margin-top: -12px; */
    margin-right: 40px;
    float: left;
    height: 40px;
}
.entityOverviewphaseleveColor {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 18px;
    color: #aaa;
    line-height: 22px;
    text-align: center;
    background: #ddd;
}

.entityOverviewphaseleveColor::after {
    border-top: 2px solid #999;
    content: "";
    width: 40px;
    display: block;
    position: relative;
    top: 10px;
    left: 22px;
}
.entityOverviewphaseleve:last-child .entityOverviewphaseleveColor::after {
    border-top: 0px solid #999;
    content: "";
    width: 40px;
    height: 20px;
    display: block;
    position: relative;
    top: 10px;
    left: 22px;
}

<div class="container" style="padding: 20px;">
 <div class="multilinePhases ng-scope">
	<div class="entityOverviewphase">
		<div class="entityOverviewphaseleve" ng-repeat="">
			<div class="entityOverviewphaseleveColor" style="background-color: #b467e7;"></div>
		</div>
	</div>
 </div>
</div>

введите описание изображения здесь введите описание изображения здесь

Вот мой код HTML и CSS. Пожалуйста, найдите скриншот ниже для получения дополнительной информации, мне нужен код, подобный картинкам ниже. Может ли кто-нибудь помочь мне решить эту проблему? спасибо.