进度条动画的几种实现方式

谁借莪１个温暖的怀抱￠ 2022-10-27 05:19 121阅读 0赞

1.动态使用aninamtion:
    const head = document.getElementsByTagName('head')[0];
      const style = document.createElement('style');
      const styleText = document.createTextNode(
      `@keyframes proAni {
           0%{width:0;}
           100% {
                width:${进度的百分比}%;
           }
        }
        @-webkit-keyframes proAni {
             0%{width:0;}
             100% {
                width:${进度的百分比}%;
               }
             }
          `
         );
        style.appendChild(styleText);
        head.appendChild(style);
    2.使用transition,控制宽度
    function change(){
        clearTimeout(this.timer);
        this.timer = null;
        this.timer = setTimeout(() => {
        this.preI += 1;
        if (this.preI === 进度条的百分比) {
           clearTimeout(this.timer);
           this.timer = null;
         } else {
             change();
         }
        }, 30);
    }
    3.使用transition,控制宽度，使用requestAnimationFrame代替setTimeout/setInterval,具体为什么可以查阅一下资料
    function change() {
       this.preI += 1;
       if (this.preI <= 进度条的百分比) {
           requestAnimationFrame(change)
       }

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python实现进度条的4种方式

![9956336695674b20a3b2fbeedc346b43.png][] for i in tqdm(range(20)): sleep(0

旧城等待，/ 2023年10月04日 17:34/ 0 赞/ 59 阅读

相关三种方式实现：进度条

1、Bootstrap实现进度条 bootstrap.min.css下载地址：[https://cdn.staticfile.org/twitter-bootstrap/

分手后的思念是犯贱/ 2023年02月21日 06:28/ 0 赞/ 14 阅读

相关介绍几种给你的Python代码加上酷炫的进度条的方式

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。大家好，在下载某些文件的时候你一定会不时盯

蔚落/ 2023年02月14日 15:47/ 0 赞/ 11 阅读

相关进度条动画的几种实现方式

1.动态使用aninamtion: const head = document.getElementsByTagName('head')[0]; c

谁借莪１个温暖的怀抱￠/ 2022年10月27日 05:19/ 0 赞/ 122 阅读

相关自定义圆形进度条的实现方式

如何自定义圆形进度条哪，也就是替换一下进度条的图片而已。先分析一下，系统对进度条如何定义的：咱们一般情况下载布局文件中这么书写： \[html\] [view pl

柔情只为你懂/ 2022年09月18日 10:54/ 0 赞/ 262 阅读

相关 Python制作进度条超级多的方式你知道几种？

from alive\_progress import alive\_barimport timemylist = \[1,2,3,4,5,6,7,8\] with a

ゝ一纸荒年。/ 2022年09月11日 12:19/ 0 赞/ 205 阅读

相关 Android 几种 PROGRESSBAR的属性（进度条）

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

淡淡的烟草味﹌/ 2022年08月24日 06:15/ 0 赞/ 256 阅读

相关自定义圆形进度条ProgressBar的三种方式

进度条默认是不确定（indeterminate=true）Android进度条 Android进度条有4种风格可以使用。默认值是progressBarStyle。设

Love The Way You Lie/ 2022年08月09日 09:46/ 0 赞/ 436 阅读

相关进度条制作-CSS动画

温馨提示代码参考 \[本人博客\]：https://blog.csdn.net/qq\_41115965/article/details/83713343

╰半夏微凉°/ 2021年09月16日 21:30/ 0 赞/ 388 阅读

相关进度条制作-GIF动画

网页进度条制作一、为什么需要网页进度条随着HTML的普及，各种CSS3动画及特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果

一时失言乱红尘/ 2021年09月16日 21:28/ 0 赞/ 520 阅读