3
У меня сейчас есть индикатор выполнения CSS, и он очень оживляет, но я хотел добавить к нему полные или неполные маркеры, и я понятия не имею, как добавить их туда.Как я могу настроить мой график выполнения CSS?
Так как они проходят через индикатор выполнения, серый круг «x» либо изменится на зеленый круг галочки, либо красный круг «x», если он не был закончен. Прямо сейчас у меня есть индикатор выполнения, который перемещается с каждым шагом.
Кто-нибудь знает, как бы я добавил круги на каждый шаг?
Это то, что я иду .. 
Мой HTML
<section class="container">
<input type="radio" class="radio" name="progress" value="five" id="five">
<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<div class="progress">
<div class="progress-bar"></div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> <label for="five" class="label">Accept Proposal</label></td>
<td><label for="twentyfive" class="label">Payment</label></td>
<td><label for="seventyfive" class="label">Review Documents</label></td>
<td><label for="onehundred" class="label">Complete</label></td>
</tr>
</tbody>
</table>
</section>
Мой CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* Copyright (c) 2012-2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
body {
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
color: #464646;
}
.container {
margin: 80px auto;
width: 830px;
text-align: center;
}
.container .progress {
margin: 0 auto;
width: 820px;
}
.progress {
padding: 4px;
background: rgba(226, 226, 226, 1);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
position: relative;
height: 7px;
border-radius: 4px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
.progress-bar:before {
bottom: 0;
border-radius: 4px 4px 0 0;
}
.progress-bar:after {
z-index: 2;
bottom: 45%;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
#five:checked ~ .progress > .progress-bar {
width: 14.3%;
background-color: #86e01e;
text-align:left;
}
#twentyfive:checked ~ .progress > .progress-bar {
width: 38%;
background-color: #86e01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
width: 64%;
background-color: #86e01e;
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color: #86e01e;
}
.radio {
display: none;
}
.label {
display: inline-block;
margin: 0 5px 10px;
padding: 3px 8px;
color: #464646;
cursor: pointer;
}