正文

用css3写出来的进度条

杜Amy  杜Amy  2022-08-01  512

关键词：

夜深了，废话不多说，先上代码：

  1 <style>
  2     * {
  3         box-sizing: border-box
  4     }
  5 
  6     .wrapper {
  7         width: 350px;
  8         margin: 200px auto
  9     }
 10 
 11     .wrapper .load-bar {
 12         width: 100%;
 13         height: 25px;
 14         border-radius: 30px;
 15         background: #70b4e5;
 16         border-radius: 1rem;
 17         -webkit-box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
 18         box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
 19         position: relative
 20     }
 21 
 22     .wrapper .load-bar:hover #counter, .wrapper .load-bar:hover .load-bar-inner {
 23         animation-play-state: paused;
 24         -moz-animation-play-state: paused;
 25         -o-animation-play-state: paused;
 26         -webkit-animation-play-state: paused
 27     }
 28 
 29     .wrapper .load-bar-inner {
 30         height: 99%;
 31         width: 0;
 32         border-radius: inherit;
 33         position: relative;
 34         background: url(images/bar.jpg) repeat;
 35         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, .3), 0 4px 5px rgba(0, 0, 0, .3);
 36         animation: loader 10s linear infinite;
 37         -moz-animation: loader 10s linear infinite;
 38         -webkit-animation: loader 10s linear infinite;
 39         -o-animation: loader 10s linear infinite
 40     }
 41 
 42     .wrapper #counter {
 43         position: absolute;
 44         background: #eeeff3;
 45         background: linear-gradient(#eeeff3, #cbcbd3);
 46         background: -moz-linear-gradient(#eeeff3, #cbcbd3);
 47         background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
 48         background: -o-linear-gradient(#eeeff3, #cbcbd3);
 49         padding: 5px 10px;
 50         border-radius: .4em;
 51         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
 52         left: -25px;
 53         top: -50px;
 54         font-size: 12px;
 55         font-weight: 700;
 56         width: 44px;
 57         animation: counter 10s linear infinite;
 58         -moz-animation: counter 10s linear infinite;
 59         -webkit-animation: counter 10s linear infinite;
 60         -o-animation: counter 10s linear infinite
 61     }
 62 
 63     .wrapper #counter:after {
 64         content: "";
 65         position: absolute;
 66         width: 8px;
 67         height: 8px;
 68         background: #cbcbd3;
 69         transform: rotate(45deg);
 70         -moz-transform: rotate(45deg);
 71         -webkit-transform: rotate(45deg);
 72         -o-transform: rotate(45deg);
 73         left: 50%;
 74         margin-left: -4px;
 75         bottom: -4px;
 76         box-shadow: 3px 3px 4px rgba(0, 0, 0, .2), 1px 1px 1px 1px rgba(0, 0, 0, .1);
 77         border-radius: 0 0 3px 0
 78     }
 79 
 80     @keyframes loader {
 81         from {
 82             width: 0
 83         }
 84         to {
 85             width: 100%
 86         }
 87     }
 88 
 89     @-moz-keyframes loader {
 90         from {
 91             width: 0
 92         }
 93         to {
 94             width: 100%
 95         }
 96     }
 97 
 98     @-webkit-keyframes loader {
 99         from {
100             width: 0
101         }
102         to {
103             width: 100%
104         }
105     }
106 
107     @-o-keyframes loader {
108         from {
109             width: 0
110         }
111         to {
112             width: 100%
113         }
114     }
115 
116     @keyframes counter {
117         from {
118             left: -25px
119         }
120         to {
121             left: 323px
122         }
123     }
124 
125     @-moz-keyframes counter {
126         from {
127             left: -25px
128         }
129         to {
130             left: 323px
131         }
132     }
133 
134     @-webkit-keyframes counter {
135         from {
136             left: -25px
137         }
138         to {
139             left: 323px
140         }
141     }
142 
143     @-o-keyframes counter {
144         from {
145             left: -25px
146         }
147         to {
148             left: 323px
149         }
150     }
151 
152     @keyframes loader {
153         from {
154             width: 0
155         }
156         to {
157             width: 100%
158         }
159     }
160 
161     .load-bar-inner {
162         height: 99%;
163         width: 0;
164         border-radius: inherit;
165         position: relative;
166         background: #c2d7ac;
167         background: linear-gradient(#e0f6c8, #98ad84);
168         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, .3), 0 4px 5px rgba(0, 0, 0, .3);
169         animation: loader 10s linear infinite
170     }
171 
172 </style>

<div class="wrapper">
    <div class="load-bar">
        <div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        var interval = setInterval(increment, 99);
        var current = 0;
        function increment() {
            current++;
            $('#counter').html(current + '%');
            if (current == 95) {
                clearInterval(interval);
                location.href = "https://www.baidu.com";
                return;
            }
        }
    });
</script>


效果图：

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：查看详情

学习|css3实现进度条加载

进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情

css3进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css3进度条</title><style>.meter{ height:20px; position:relative;margin:60px020px0; backgroun 查看详情

css3彩色进度条加载动画带进度百分比

在线演示本地下载查看详情

javascript以及css3进度条

JavaScriptcss3进度条使用css3实现进度条<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>#id1{/*background-color:red;*/border:solid1pxre 查看详情

css3做圆形进度条

...重点讲解这个效果，首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：.circleprogress{ width:160px; height:160px; border:20pxsolidred; border-radius:50%;}然后... 查看详情

图解css3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先，当有人说你能不能做一个圆形进度条... 查看详情

css3渐变进度条动效

效果预览：下载地址：https://qrk.lanzous.com/ic91f6d 建议复制后打开点击下载查看详情

css3loading进度条加载动画特效

在线演示本地下载查看详情

两种css3圆环进度条详解

晚上睡觉之前，我抽了1个多小时，研究了一下圆环进度条，结合从网上查阅的资料，我终于掌握了两种圆环的生成方法。这次的效果就是单纯的CSS3效果，也没有写具体的JS，等以后有时间在好好整理一下吧~。第一种：通过o... 查看详情

css3圆环状进度条

HTML：<divclass="wrap"><divclass="progress-radialprogress-25"><divclass="overlay">25%</div></div><divclass="progress-radialprogress-50"><divclass="overlay">50% 查看详情

如何用纯css3制作进度条

1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill和.bar-fill的span标签。<div class="container... 查看详情

HTML5进度条元素的CSS3过渡

】HTML5进度条元素的CSS3过渡【英文标题】：CSS3TransitionofHTML5progressbarelement【发布时间】：2014-08-1600:04:22【问题描述】：我正在使用此处描述的进度条：http://css-tricks.com/html5-progress-element/使用<progress>元素并使用伪类对其... 查看详情

怎样用div实现带百分百环形进度条

html5+javascript实现的圆形进度条，应该符合你要求源代码：http://blog.csdn.net/tangdou5682/article/details/52778766参考技术A1、html5直接就可用css3的属性去做圆形，border-radius即可实现圆角。2、图片形式，左右两侧做圆角图片，衔接好，即可... 查看详情

利用clip-path实现环形进度条

...css与js实现环形进度条的（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实话春节后遗症真可怕haha~ 看了网上的三种方法实现方式如下：两个clip过的半圆，... 查看详情

一个用css写出来的下拉菜单

1<style>2/*css*/3#body{4float:left;5}6#xialakuang{7background-color:#f9f9f9;8box-shadow:0px8px16px0pxrgba(0,0,0,0.2);/*设置下拉框的阴影*/9display:none;10}11#bodya{12display:block;13padding:10px15px;14co 查看详情

好的测试用例是怎么写出来的？

　　测试用例（TestCase）是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，以便测试某个程序路径或核实是否满足某个特定需求，是软件测试人员需要具备的基础能力。　　好用例的标准　　/是否可以发现Bug　... 查看详情

css3实现炫酷进度条(代码片段)

看了一个进度条很漂亮，所以自己试试看html<divclass="load-container"> <spanclass="run"></span> <divclass="meter">0</div> </div>css样式：查看详情