CSS progress进度条

    <section class="skills">
        <ol class="clearfix">
            <li>
                df&amp;df
                <progress value="70" max="100">70 %</progress>
            </li>

            <li>
                dfdf
                <progress value="90" max="100">90 %</progress>
            </li>
            <li>
                ddd

                <progress value="50" max="100">50 %</progress>
            </li>
            <li>
                sss

                <progress value="60" max="100">60 %</progress>
            </li>
            <li>
                eee

                <progress value="60" max="100">60 %</progress>
            </li>
            <li>
                aaa
                <progress value="40" max="100">40 %</progress>
            </li>
        </ol>
    </section>

.clearfix::after{content: "";display: block;clear: both;}
body{ background: #efefef;}
a{ text-decoration: none;}
ol,li{ list-style: none;}
*{ margin: 0;padding: 0;}
hr{ height: 0;border:none;border-top: 1px solid #dedede;}
section.skills{ max-width: 940px;margin: 60px auto 0;}
section.skills>ol{ margin-top: 30px;margin-bottom: 50px; padding: 40px 52px 24px; background-color: #ffffff; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15), 0 2px 9px 0 rgba(0,0,0,0.1);}
section.skills li{ float: left;width: 48%;margin-bottom: 20px;}
/* section.skills progress{ display: block;width: 100%;background-color: #e6686a;} */
section.skills li:nth-child(even){ float: right;}
/* progress {
    -webkit-appearance: none;
  }
  
  ::-webkit-progress-bar {
     background-color: #bbbbbb;
  }
  :indeterminate::-moz-progress-bar {
    width: 0;
  }

  progress::-webkit-fill {
    background-color: #e6686a;
  } */
  

  section.skills progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  
    width: 100%;
    height: 5px;
  
    /* Firefox */
    border: none;
    background: #96dff3;
    border-radius: 3px;
    /* box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset; */
  }
  
  section.skills progress::-webkit-progress-bar {
    background: #96dff3;
    /* box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset; */
    border-radius: 3px;
  }
  
  section.skills progress::-webkit-progress-value {
    background-color: #15afd8;
    border-radius: 3px;
  }
  
  section.skills progress::-moz-progress-bar {
    background-color: #15afd8;
    border-radius: 3px;
  }