css3彩色进度条

最新推荐文章于 2024-03-05 09:39:29 发布

weixin_33842328

最新推荐文章于 2024-03-05 09:39:29 发布

阅读量147

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用HTML、CSS和JavaScript创建的进度条动画效果。该进度条具备从左至右渐变的颜色变化，并且能够通过JavaScript控制加载百分比的显示。文章详细展示了如何设置背景渐变、阴影和边框等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
   <head>
       <title>progress</title>
       <script type="text/javascript" src="../jQuery1.7.js"></script>
       <style type="text/css">
           body{
               margin: 0;
               width: 100%;
               height: 100%;
               background: #333;
           }
           #wrapper{
               height: 6px;
               width: 600px;
               position: absolute;
               top: 50%;
               left: 50%;
               margin-top: -3px;
               margin-left: -300px;
               background-color: transparent;
               background-image: -webkit-linear-gradient(top,#000,#212121);
               background-image: -moz-linear-gradient(top,#000,#212121);
               background-image: -ms-linear-gradient(top,#000,#212121);
               background-image: linear-gradient(top,#000,#212121);
               box-shadow: inset 0 -2px 2px rgba(0,0,0,0.4);
               border-radius: 3px 0 0 3px;
           }
           .loader-container{
               height: 6px;
               width: 600px;
               position: absolute;
               top: 50%;
               left: 50%;
               margin-top: -3px;
               margin-left: -300px;
               background-color: transparent;
               background-image: -webkit-linear-gradient(left,#5bd8ff,#ff0000);
               background-image: -moz-linear-gradient(left,#5bd8ff,#ff0000);
               background-image: -ms-linear-gradient(left,#5bd8ff,#ff0000);
               background-image: linear-gradient(left,#5bd8ff,#ff0000);
               box-shadow: inset 0 -2px 2px rgba(0,0,0,0.4);
               border-radius: 3px 0 0 3px;
           }
           .loader-container:after{
               content: "";
               display: block;
               position: absolute;
               right: 0;
               top: 50%;
               width: 1em;
               height: 1em;
               border-radius: 50%;
               margin-top: -0.5em;
               margin-right: -1em;
               background-image: -webkit-linear-gradient(top,#000,#212121);
               background-image: -moz-linear-gradient(top,#000,#212121);
               background-image: -ms-linear-gradient(top,#000,#212121);
               background-image: linear-gradient(top,#000,#212121);
           }
           .loader-container.done:after {
              background: Red;
           }
           .run .runner {
              content: "";
              position: absolute;
              right: 0;
              height: 100%;
              width: 0%;
              overflow: hidden;
              background-color: transparent;
              background-image: -webkit-linear-gradient(top, #000000, #212121);
              background-image: -moz-linear-gradient(top, #000000, #212121);
              background-image: -o-linear-gradient(top, #000000, #212121);
              background-image: -ms-linear-gradient(top, #000000, #212121);
              background-image: linear-gradient(top, #000000, #212121);
              -webkit-animation: loader 10s linear;
           }
           .meter {
              position: absolute;
              top: 0;
              right: 0;
              font-size: 2em;
              margin-top: .3em;
              color: #ff0000;
              animation: meter 10s linear;
              text-shadow: 0 -1px 0 #333333;
           }
           .meter:after {
              content: "%";
           }
           @-webkit-keyframes loader{
               0%{
                   width: 100%;
               }
               100%{
                   width: 0%;
               }
           }
       </style>
   </head>
   <body>
       <div id="wrapper">
           <div class="loader-container">
               <div class="meter">0</div>
               <span class="runner"></span>
           </div>
       </div>

       <script type="text/javascript">
           var Loader = function () {
               var loader = document.querySelector('.loader-container'),
                   meter = document.querySelector('.meter'),
                   k, i = 1,
                    counter = function () {
                        if (i <= 100) {
                          meter.innerHTML = i.toString();
                          i++;
                        } else {
                          window.clearInterval(k);
                        }
                    };

                return {
                    init: function (options) {
                       options = options || {};
                        var time = options.time ? options.time : 0,
                            interval = time/100;

                        loader.classList.add('run');
                        k = window.setInterval(counter, interval);
                        setTimeout(function () {
                            loader.classList.add('done');
                        }, time);
                    },
                }
           }();

           Loader.init({
                // If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.
                time: 10000
           });
       </script>
   </body>
</html>