如何为CSS进度条设置动画？

时间：2014-11-17 19:08:32

标签： html css progress-bar animate.css

我现在有这个CSS进度条，它动画效果很好，但我想添加完整或不完整的标记，我不知道如何在那里添加。

因此，当他们通过进度条时，灰色的＆＃39; x＆＃39;圆圈将变为绿色复选标记圆圈或红色“x”。如果没有完成则圈出来。现在我只有一个随每一步移动的进度条。

任何人都知道如何将圆圈添加到每个步骤？

这就是我要去的地方.. enter image description here

我的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;
}

1 个答案:

答案 0 :(得分：2)

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;
        }
    }
}

注意：您需要更新进度条 div的宽度，并在收到完成的工作百分比时调用 currentProgress（）函数。 还有用于显示进度状态的单选按钮的CSS。

相关问题
最新问题