Clever Geek Handbook

How do I customize my CSS execution timeline?

I have this CSS progress bar right now and it is developing great, but I wanted to add complete or incomplete markers to it and I don’t know how to add them.

So when they go through the progress bar, the gray "x" circle will either change to a green checkmark circle, or a red "x" circle if it hasn't been completed. Right now I have a progress bar that moves with each step.

Does anyone know how to add circles to each step?

This is what I'm going to .. enter image description here

My 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>

My 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;
}
+3


source to share


1 answer


HTML:

<section class="container">
    <div class="progress">
        <div class="progress-point">
            <p id="progress_0" class="progressPoint displayNone" style="width: 0%;">

            </p>
            <p id="progress_20" class="progressPoint " style="width: 20%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_20_status">
            </p>
            <p id="progress_40" class="progressPoint " style="width: 40%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_40_status">
            </p>
            <p id="progress_60" class="progressPoint " style="width: 60%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_60_status">
            </p>
            <p id="progress_80" class="progressPoint " style="width: 80%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_80_status">
            </p>
            <p id="progress_100" class="progressPoint displayNone" style="width: 100%;">

            </p>
        </div>
      <div id="progress" class="progress-bar" style="width:40%;"></div>
    </div>
  </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/
 */
.progress-bar {
  width: 14.3%;
  background-color: #86e01e;
  text-align:left;
}

#twentyfive:checked ~ .progress > .progress-bar {
 background-color: #86e01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 64%;
  background-color: #86e01e;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}


.label {
  display: inline-block;
  margin: 0 5px 10px;
  padding: 3px 8px;
  color: #464646;
  cursor: pointer;
}
.progressPoint {
    float: left;
    position: absolute;
    text-align: right;
}
.progress-point {
    width: 100%;
    position: relative;
}
.displayNone {
    display: none;
}
.displayBlock {
    display: block;
}
.progressStatus {
    margin: 0px;
    top: -5px;
    position: relative;
    z-index: 5;
}


JavaScript:

function currentProgress() {
    var progress=parseInt(document.getElementById("progress").style.width);
    if(progress >= 20 || progress >= 40 || progress >= 60 || progress >= 80) {
        if(progress >= 20) {
            document.getElementById("progress_20_status").checked = true;
        }
        if(progress >= 40) {
            document.getElementById("progress_40_status").checked = true;
        }
        if(progress >= 60) {
            document.getElementById("progress_60_status").checked = true;
        }
        if(progress >= 80) {
            document.getElementById("progress_80_status").checked = true;
        }
    }
}

Note. You need to update the width of the progress-bar div and call the currentProgress () function as you get the percentage of work done. And also the CSS toggle used to display the progress status.

+2


source






More articles:


All Articles