create a circle with flexbox and css - css

Question

I am trying to create a circle css and add some more changes to it,
Here is my code for circles
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
and the html code
<div class="container">
<div class="holder h1"></div>
<div class="holder h2"></div>
<div class="holder h3"></div>
<div class="holder h4"></div>
</div>
works well for the circles, but my end goal is to do this
https://prnt.sc/KCA2zWq435oK
how can i do this, any help will be much appreciated
regards

Answer 1

I created this table
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
th {
writing-mode: vertical-rl;
min-width: 30px;
transform: rotate(180deg);
text-transform: capitalize;
}
td {
min-width: 30px;
height: 30px;
}
<table>
<tr>
<th>
drafted
</th>
<th>
submitted
</th>
<th>
approved
</th>
<th>
processed
</th>
</tr>
<tr>
<td>
<div class="holder h1">
<div/>
</td>
<td>
<div class="holder h2">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
<div class="holder h4">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
Not drafted - missing
</td>
</tr>
</table>
I hope it helps you
You can easily customize it for yourself

Answer 2

Semantically this is a table.
This snippet creates the circles as radial-gradient backgrounds to the relevant cells.
The headings are written vertically and rotated to give the desired orientation.
thead>tr>th {
writing-mode: vertical-lr;
transform: rotate(180deg);
text-align: left;
}
tbody>tr>td {
width: 50px;
height: 50px;
--bg: gray;
background-image: radial-gradient(circle, var(--bg) 0 70%, transparent 70% 100%);
background-size: 70% 70%;
background-repeat: no-repeat;
background-position: center center;
}
tbody>tr>td:last-child {
width: 400px;
--bg: transparent;
}
.gold {
--bg: gold;
}
.green {
--bg: green;
}
.red {
--bg: red;
}
<table>
<thead>
<tr>
<th>Drafted</th>
<th>Submitted</th>
<th>Approved</th>
<th>Processed</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Not drafted - missing</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td></td>
<td></td>
<td>Drafted but not submitted</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Submitted - not approved</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td>Approved not processed</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td>Processed</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td class="red"></td>
<td></td>
<td>Rejected, back in draft</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Rejected initially, submitted again</td>
</tr>
</tbody>
</table>