效果如下图:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title > 渐变进度条 </title>
- <meta name="description" content="Demo for a tutorial on how to create shaded CSS-only progress bars with Sass" />
- <meta name="keywords" content="css progress, sass, progress bar, tutorial, css-only, mixin" />
- <style>
- .bar{font-size:1em;position:relative;display:inline-block;width:504px;height:20px;transition:all .5s ease-in-out;border-radius:60px}
- .bar .bar-face{position:absolute;bottom:0;left:0;display:inline-block;box-sizing:border-box;width:100%;height:100%;background-color:#ddd;backface-visibility:visible;transition:transform .5s ease-out;border-radius:60px}
- .bar .bar-face.percentage:before{content:'';position:absolute;bottom:0;width:0;height:100%;margin:0;display:block;box-sizing:border-box;color:rgba(68,68,68,.8);transition:all .5s ease-out;border-radius:60px}
- .bar[aria-valuenow='1'] .percentage:before{width:1%}
- .bar[aria-valuenow='2'] .percentage:before{width:2%}
- .bar[aria-valuenow='3'] .percentage:before{width:3%}
- .bar[aria-valuenow='4'] .percentage:before{width:4%}
- .bar[aria-valuenow='5'] .percentage:before{width:5%}
- .bar[aria-valuenow='6'] .percentage:before{width:6%}
- .bar[aria-valuenow='7'] .percentage:before{width:7%}
- .bar[aria-valuenow='8'] .percentage:before{width:8%}
- .bar[aria-valuenow='9'] .percentage:before{width:9%}
- .bar[aria-valuenow='10'] .percentage:before{width:10%}
- .bar[aria-valuenow='11'] .percentage:before{width:11%}
- .bar[aria-valuenow='12'] .percentage:before{width:12%}
- .bar[aria-valuenow='13'] .percentage:before{width:13%}
- .bar[aria-valuenow='14'] .percentage:before{width:14%}
- .bar[aria-valuenow='15'] .percentage:before{width:15%}
- .bar[aria-valuenow='16'] .percentage:before{width:16%}
- .bar[aria-valuenow='17'] .percentage:before{width:17%}
- .bar[aria-valuenow='18'] .percentage:before{width:18%}
- .bar[aria-valuenow='19'] .percentage:before{width:19%}
- .bar[aria-valuenow='20'] .percentage:before{width:20%}
- .bar[aria-valuenow='21'] .percentage:before{width:21%}
- .bar[aria-valuenow='22'] .percentage:before{width:22%}
- .bar[aria-valuenow='23'] .percentage:before{width:23%}
- .bar[aria-valuenow='24'] .percentage:before{width:24%}
- .bar[aria-valuenow='25'] .percentage:before{width:25%}
- .bar[aria-valuenow='26'] .percentage:before{width:26%}
- .bar[aria-valuenow='27'] .percentage:before{width:27%}
- .bar[aria-valuenow='28'] .percentage:before{width:28%}
- .bar[aria-valuenow='29'] .percentage:before{width:29%}
- .bar[aria-valuenow='30'] .percentage:before{width:30%}
- .bar[aria-valuenow='31'] .percentage:before{width:31%}
- .bar[aria-valuenow='32'] .percentage:before{width:32%}
- .bar[aria-valuenow='33'] .percentage:before{width:33%}
- .bar[aria-valuenow='34'] .percentage:before{width:34%}
- .bar[aria-valuenow='35'] .percentage:before{width:35%}
- .bar[aria-valuenow='36'] .percentage:before{width:36%}
- .bar[aria-valuenow='37'] .percentage:before{width:37%}
- .bar[aria-valuenow='38'] .percentage:before{width:38%}
- .bar[aria-valuenow='39'] .percentage:before{width:39%}
- .bar[aria-valuenow='40'] .percentage:before{width:40%}
- .bar[aria-valuenow='41'] .percentage:before{width:41%}
- .bar[aria-valuenow='42'] .percentage:before{width:42%}
- .bar[aria-valuenow='43'] .percentage:before{width:43%}
- .bar[aria-valuenow='44'] .percentage:before{width:44%}
- .bar[aria-valuenow='45'] .percentage:before{width:45%}
- .bar[aria-valuenow='46'] .percentage:before{width:46%}
- .bar[aria-valuenow='47'] .percentage:before{width:47%}
- .bar[aria-valuenow='48'] .percentage:before{width:48%}
- .bar[aria-valuenow='49'] .percentage:before{width:49%}
- .bar[aria-valuenow='50'] .percentage:before{width:50%}
- .bar[aria-valuenow='51'] .percentage:before{width:51%}
- .bar[aria-valuenow='52'] .percentage:before{width:52%}
- .bar[aria-valuenow='53'] .percentage:before{width:53%}
- .bar[aria-valuenow='54'] .percentage:before{width:54%}
- .bar[aria-valuenow='55'] .percentage:before{width:55%}
- .bar[aria-valuenow='56'] .percentage:before{width:56%}
- .bar[aria-valuenow='57'] .percentage:before{width:57%}
- .bar[aria-valuenow='58'] .percentage:before{width:58%}
- .bar[aria-valuenow='59'] .percentage:before{width:59%}
- .bar[aria-valuenow='60'] .percentage:before{width:60%}
- .bar[aria-valuenow='61'] .percentage:before{width:61%}
- .bar[aria-valuenow='62'] .percentage:before{width:62%}
- .bar[aria-valuenow='63'] .percentage:before{width:63%}
- .bar[aria-valuenow='64'] .percentage:before{width:64%}
- .bar[aria-valuenow='65'] .percentage:before{width:65%}
- .bar[aria-valuenow='66'] .percentage:before{width:66%}
- .bar[aria-valuenow='67'] .percentage:before{width:67%}
- .bar[aria-valuenow='68'] .percentage:before{width:68%}
- .bar[aria-valuenow='69'] .percentage:before{width:69%}
- .bar[aria-valuenow='70'] .percentage:before{width:70%}
- .bar[aria-valuenow='71'] .percentage:before{width:71%}
- .bar[aria-valuenow='72'] .percentage:before{width:72%}
- .bar[aria-valuenow='73'] .percentage:before{width:73%}
- .bar[aria-valuenow='74'] .percentage:before{width:74%}
- .bar[aria-valuenow='75'] .percentage:before{width:75%}
- .bar[aria-valuenow='76'] .percentage:before{width:76%}
- .bar[aria-valuenow='77'] .percentage:before{width:77%}
- .bar[aria-valuenow='78'] .percentage:before{width:78%}
- .bar[aria-valuenow='79'] .percentage:before{width:79%}
- .bar[aria-valuenow='80'] .percentage:before{width:80%}
- .bar[aria-valuenow='81'] .percentage:before{width:81%}
- .bar[aria-valuenow='82'] .percentage:before{width:82%}
- .bar[aria-valuenow='83'] .percentage:before{width:83%}
- .bar[aria-valuenow='84'] .percentage:before{width:84%}
- .bar[aria-valuenow='85'] .percentage:before{width:85%}
- .bar[aria-valuenow='86'] .percentage:before{width:86%}
- .bar[aria-valuenow='87'] .percentage:before{width:87%}
- .bar[aria-valuenow='88'] .percentage:before{width:88%}
- .bar[aria-valuenow='89'] .percentage:before{width:89%}
- .bar[aria-valuenow='90'] .percentage:before{width:90%}
- .bar[aria-valuenow='91'] .percentage:before{width:91%}
- .bar[aria-valuenow='92'] .percentage:before{width:92%}
- .bar[aria-valuenow='93'] .percentage:before{width:93%}
- .bar[aria-valuenow='94'] .percentage:before{width:94%}
- .bar[aria-valuenow='95'] .percentage:before{width:95%}
- .bar[aria-valuenow='96'] .percentage:before{width:96%}
- .bar[aria-valuenow='97'] .percentage:before{width:97%}
- .bar[aria-valuenow='98'] .percentage:before{width:98%}
- .bar[aria-valuenow='99'] .percentage:before{width:99%}
- .bar[aria-valuenow='100'] .percentage:before{width:100%}
- .bar.heat-gradient .percentage:before {
- background: -moz-linear-gradient(left, rgba(255, 24, 1, 1) 0%, rgba(239, 106, 30, 1) 20%,rgba(9, 188, 166, 1) 70%);
- background: -o-linear-gradient(left, rgba(255, 24, 1, 1) 0%, rgba(239, 106, 30, 1) 20%,rgba(9, 188, 166, 1) 70%);
- background: -ms-linear-gradient(left, rgba(255, 24, 1, 1) 0%, rgba(239, 106, 30, 1) 20%,rgba(9, 188, 166, 1)70%);
- background: linear-gradient(to right, rgba(255, 24, 1, 1) 0%, rgba(239, 106, 30, 1) 20%,rgba(9, 188, 166, 1) 70%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2', GradientType=1);
- background-size: 42em
- }
- </style>
- </head>
- <body>
- <div class="container">
- <header class="codrops-header">
- <h1 > 渐变进度条 </h1>
- </header>
- <section class="content">
- <!--aria-valuenow="80" 改变此数字 -->
- <div class="progress-bar">
- <div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
- <div class="bar-face face-position back percentage"></div>
- </div>
- </div>
- </section>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17640/3aa66edf74e8ab0169d360ecb7f68ff1.html