web: How to make corners of progress bar round in css

lundi 23 mars 2015

How to make corners of progress bar round in css

For my progress bar I would like to have the edges rounded and the percentage on display inside the progress bar. I managed to get the corners of the progress value to be round but not the bar/background. Also the animation doesn't seem to work.

~css


.progress-bar body { 
font-family: "Helvetica Neue", arial, sans-serif;
padding: 2em;
margin: 50px auto 0;
max-width: 800px;
border-radius: 15px;
-moz-border-radius: 15px;
}


.progress-bar .skill h3 { 
font-size: 1em; 
color: #fff;
left: 1em;
line-height: 1;
position: absolute;
top:1em;

}

progress { border-radius:15px; -moz-border-radius: 15px;}

.progress-bar progress, progress[role] {
-webkit-appearance: none;
-moz-appearance: none;
 appearance: none;
 background-size: auto;
 height: 50px;
 width: 100%;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }



  .progress-bar .skill-list {
   list-style-type: none;
   margin: 0;
   padding: 1em;

   }

   .progress-bar .skill {
    margin-bottom: 1em;
    position: relative;
    list-style-type: none;

    }

    .progress-bar .skill ::-webkit-progress-value { 
    -webkit-animation: bar-fill 2s;
    width: 0px;
    -moz-border-radius: 15px;
    border-radius: 15px;
     }



     .progress-bar .skill-1::-webkit-progress-value {
     background: #ff9e2c;
     border-radius: 15px;
     -moz-border-radius: 15px;
     }

 .progress-bar .skill-1::-moz-progress-bar {
    background: #ff9e2c;
   border-radius: 15px;
   -moz-border-radius: 15px;
   }

  .progress-bar .skill-2::-webkit-progress-value {
  background: #4ecdc4;
  border-radius: 15px;
   -moz-border-radius: 15px;
  }

 .progress-bar .skill-2::-moz-progress-bar {
  background: #4ecdc4;
  border-radius: 15px;
 -moz-border-radius: 15px;
 }

 .progress-bar .skill-3::-webkit-progress-value {
 background: #ff6b6b;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }

.progress-bar .skill-3::-moz-progress-bar {
 background: #ff6b6b;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }




 @-webkit-keyframes bar-fill {
  0% { width: 0; }
 }
 @keyframes bar-fill {
 0% { width: 0; }
 }

~html


<div class="progress-bar">
<body>
<ul class="skill-list">
  <li class="skill">
    <h3>HTML/CSS</h3>
    <progress class="skill-1" max="100" value="80">
      <h2>80%</h2>
    </progress>
  </li>
  <li class="skill">
    <h3>Javascript</h3>
    <progress class="skill-2" max="100" value="45">
     <h2>45%</h2>
    </progress>
  </li>
  <li class="skill">
    <h3>PHP</h3>
    <progress class="skill-3" max="100" value="35">
      <h2>35%</h2>
    </progress>
  </li>
</ul>
</body>
</div>

web

lundi 23 mars 2015

How to make corners of progress bar round in css

Aucun commentaire:

Enregistrer un commentaire