Question

我想设计一个所谓的'不确定' - 进度条。（A <progress> - 没有值的标记）

  <progress max="100"></progress>

看到我在网上找到的codepen作为一个例子（不是我的）：

http://codepen.io/anon/pen/mEWqer

差异应该是显而易见的。没有任何样式的默认栏有在它的运动。我想做什么，风格不确定进度条，以便它像上面一样“保持”移动。

任何造型方法总是会产生一个“完全”填充的条形，没有移动部分。

我做错了什么，是预期还是错误？由于我对css不是很好，我在这里有点不知所措。互联网 - 就我发现的信息而言 - 仅涉及正常进度栏的样式。

编辑：现在我更加困惑。它似乎在边缘工作..（点似乎是边缘的默认'进度条'）。那么，一个错误？请参阅边缘附图。

编辑2：所有建议的答案都是针对确定的进度条。看看我提供的codepen（'Default'-bar），我应该清楚我的意思是一个不确定的进度条。

Answer 1

对我来说似乎是个错误...... 当您尝试在其上应用某些样式时，只要标记内存有value，Chrome似乎就会定义所定义的进度条。我也尝试使用Chrome Canary，但同样的事情附加了。

思考这个问题可能是一个好主意，“你去动物品吧，我会用自己的风格擦掉你”。但显然，

动画似乎不再适用于进度元素中的伪元素，在Blink中。在这个出版时，他们做到了。 Brian LePore向我报告并向我指出了这个讨论它的线程并创建了一个简化的测试用例。

-

也许它与Shadow DOM之外定义的@keyframes无法被内部元素访问一样。从Chromium 39/40可能发生变化的时间开始？

https://css-tricks.com/html5-progress-element/#article-header-id-5

所以我试过但是，动画不再有用了......

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

h1 {
  margin-top: 0;
}

progress {
  width: 100%;
}

.styled progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  /* Firefox */
  border: none;
  background: #EEE;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
}

/* lest apply somes styles on it */
.styled progress:not([value])::-webkit-progress-bar {
  background: blue;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: 3px;
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);
  -webkit-animation: animate-stripes 5s linear infinite;
          animation: animate-stripes 5s linear infinite;
}

/* this seems to does not work anymore */
@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}
@keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

.styled progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 3px;
}

.styled progress::-moz-progress-bar {
  background-color: blue;
  border-radius: 3px;
}

<div id="page-wrapper">
  <p>Default</p>
  <p>
    <progress max="100"></progress>
  </p>

  <p>Styled defined</p>
  it does not move:
  <p class="styled">
    <progress max="100" value="50"></progress>
  </p>
  <p>Styled defined</p>
  this should move:
  <p class="styled">
    <progress max="100"></progress>
  </p>

Answer 2

您好意思是使用overflow:hidden风格吗？我希望如此

https://jsfiddle.net/moongod101/7c2xde9f/

Answer 3

HTML

 <p style="width:60%" data-value="60">CSS3</p>
    <progress max="100" value="60" class="css3">
        <!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
        <div class="progress-bar">
            <span style="width: 60%">60%</span>
        </div>
    </progress>

CSS

           HTML  CSS   Result
          Edit on 
        @import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

      /* Basic resets */

  * { 
        margin:0; padding:0; 
        box-sizing: border-box;
     }

  body {
       margin: 50px auto 0;
      max-width: 800px;

     font-family: "Expletus Sans", sans-serif;
   }

    li {

         width: 50%;
         float: left;
        list-style-type: none;

        padding-right: 5.3333333%;
       }

       li:nth-child(even) { margin-bottom: 5em;}

   h2 {
     margin: 0 0 1.5em;
       border-bottom: 1px solid #ccc;

      padding: 0 0 .25em;
    }

      /* Styling an indeterminate progress bar */

   progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
     }

    /* Styling the determinate progress element */

   progress[value] {
     /* Get rid of the default appearance */
     appearance: none;

    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
border: none;

/* Add dimensions */
 width: 100%; height: 20px;

/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
color: royalblue;

position: relative;
margin: 0 0 1.5em; 
 }

  /*
      Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
 -webkit-progress-bar -> To style the progress element container
   -webkit-progress-value -> To style the progress element value.
  */

  progress[value]::-webkit-progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
 position: relative;

background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;

/* Let's animate this */
animation: animate-stripes 5s linear infinite;
 }

  @keyframes animate-stripes { 100% { background-position: -100px 0; } }

 /* Let's spice up things little bit by using pseudo elements. */

  progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo elements on pseudo classes.          A rare phenomenon! */
content: '';
position: absolute;

width:5px; height:5px;
top:7px; right:7px;

background-color: white;
border-radius: 100%;
 }

 /* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

 progress[value]::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
   -moz-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
 -moz-linear-gradient( top,
                                                    rgba(255, 255, 255,  .25),
                                                    rgba(0,0,0,.2)),
 -moz-linear-gradient( left, #09c, #f44);

background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;

  /* Firefox doesn't support CSS3 keyframe animations on progress element.         Hence, we did not include animate-stripes in this code block */
  }

   /* Fallback technique styles */
   .progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

/* Dimensions should be similar to the parent progress element. */
width: 100%; height:20px;
 }

    .progress-bar span {
background-color: royalblue;
border-radius: 3px;

display: block;
text-indent: -9999px;
}

p[data-value] { 

    position: relative; 
   }

   /* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

 p[data-value]:after {
content: attr(data-value) '%';
position: absolute; right:0;
} 





  .html5::-webkit-progress-value,
 .python::-webkit-progress-value  {
/* Gradient background with Stripes */
background-image:
 -webkit-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
   -webkit-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
 -webkit-linear-gradient( left, #09c, #f44);
 }

  .css3::-webkit-progress-value,
  .php::-webkit-progress-value 
{
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                  transparent 66%),
   -webkit-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
   -webkit-linear-gradient( left, #09c, #ff0);
   }

 .jquery::-webkit-progress-value,
  .node-js::-webkit-progress-value 
 {
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
    -webkit-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
 -webkit-linear-gradient( left, #09c, #690);
     }

     /* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

   .html5::-moz-progress-bar,
   .php::-moz-progress-bar {
       /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
      -moz-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
    -moz-linear-gradient( left, #09c, #f44);
   }

    .css3::-moz-progress-bar,
     .php::-moz-progress-bar {
   {
 /* Gradient background with Stripes */
background-image:
      -moz-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
      -moz-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
      -moz-linear-gradient( left, #09c, #ff0);
  }

   .jquery::-moz-progress-bar,
    .node-js::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
       -moz-linear-gradient( 135deg,
                                                 transparent,
                                                 transparent 33%,
                                                 rgba(0,0,0,.1) 33%,
                                                 rgba(0,0,0,.1) 66%,
                                                 transparent 66%),
     -moz-linear-gradient( top,
                                                    rgba(255, 255, 255, .25),
                                                    rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);
  }

Answer 4

好吧，不知道如果这是你正在查找但查看它，使用这个自定义进度条你可以设置它的样式并设置它的宽度（它的响应）。

CSS

* {
        /* This will make all your elements have their real size (incluiding with padding) */
        box-sizing: content-box;
    }

    .pro-bar-container {
        background: #ccc;
        border: 2px solid blue;
        height: 1em;
        overflow: hidden;
        width: 100%;
    }

    .pro-bar {
        background: royalblue;
        height: inherit;
    }

    .pro-bar-width{
        /* Here is where you specify the width of ur progress-bar */
        width: 80%;
    }

    .pro-bar-candy {
        animation: progress .6s linear infinite;
        /* Don't touch this */
        background: linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.25) 75%,
            transparent 75%,
            transparent);
        /* Don't touch this */
        background-repeat: repeat-x;
        /* The size of the bars must match the background-position in the @keyframes */
        background-size: 2em 2em;
        height: inherit;
        width: 100%;
    }

    @keyframes progress {
        to { background-position: 2em 0; }
    }

HTML

<div class="pro-bar-container">
    <div class="pro-bar pro-bar-width" data-pro-bar-percent="100">
        <div class="pro-bar-candy"></div>
    </div>
</div>

https://jsfiddle.net/Alejandrom3/r5yLgjr0/

没有值的不确定<progress> -tag的自定义颜色

4 个答案:

HTML

CSS