SethTrowbridge/atomic-css
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

progress bar

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-10 17:16:18 -04:00
parent f3166e7651
commit c00c4b5ec7
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -136,7 +136,69 @@
top: 5px;
}
</style>
<!-- progress bar -->
<style>
.progress
{
position:relative;
display:block;
margin:0;
padding:0;
border:0;
font-size:0;
}
.progress::before, .progress::after
{
content:" ";
display: block;
position:absolute;
top:0;
left:0;
width:100%;
height:12px;
border-radius:20px;
background:tan;
}
.progress::after
{
background:green;
}
.progress > *
{
position:relative;
display:inline-block;
width:20%;
padding:40px 0 0 0;
margin:6px 0 0 0;
list-style-type: none;
font-size:13px;
text-align:center;
}
.progress--stage-1::after{ width:10%; }
.progress--stage-2::after{ width:30%; }
.progress--stage-3::after{ width:50%; }
.progress--stage-4::after{ width:70%; }
.progress--stage-5::after{ width:100%; }
.progress--stage-1 > *:nth-child(1)::before, .progress--stage-2 > *:nth-child(2)::before, .progress--stage-3 > *:nth-child(3)::before, .progress--stage-4 > *:nth-child(4)::before, .progress--stage-5 > *:nth-child(5)::before
{
content:" ";
display: block;
position:absolute;
top:0;
left:50%;
width:30px;
height:30px;
border-radius:50px;
background:green;
transform:translate(-50%, -50%);
}
.progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5)
{
font-weight:900;
}
</style>
<style>
@ -164,8 +226,18 @@
.gap--xs { margin:12px 0 0 0; }
</style>
</head>
<body>
<ul class="progress progress--stage-2">
<li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
<li class="txt--wgt-normal txt--size-copy">Payment Options</li>
<li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
<li class="txt--wgt-normal txt--size-copy">Confirmation</li>
<li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
</ul>
<form>
<input type="checkbox" id="bool-1"/>