正文

原生js实现加载进度条

aiguangyuan  aiguangyuan  2022-12-30  791

关键词：

分享一个原生JS实现的动态加载进度条特效，效果如下：

实现的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现加载进度条</title>
    <style>
        #box 
            width: 300px;
            height: 40px;
            border: 1px solid #C8C8C8;
            background: white;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        

        #bar 
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            height: 40px;
            width: 100%;
            line-height: 40px;
            color: white;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
            clip: rect(0px, 0, 40px, 0px);
            background: #00A1F5;
        

        #text 
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: black;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
        
    </style>

</head>

<body>
    <div id="box">
        <div id="bar">0%</div>
        <div id="text">0%</div>
    </div>
    <script>

        window.onload = function () 

            var percent = 0;

            // 设定定时器
            var timer = setInterval(function () 
                // 如果当前的值为100
                if (percent == 100) 
                    // 清除定时器
                    clearInterval(timer);
                 else 
                    // 将当前状态值累加1
                    percent += 1;
                    // 调用执行状态的函数,传入状态值
                    progress(percent);
                
            , 30);

            // 进度变化条
            function progress(percent) 

                // 获取容器
                var box = document.getElementById('box');
                // 获取进度条
                var bar = document.getElementById('bar');
                // 获取内层文字
                var text = document.getElementById('text');

                // 获取总进度条的宽度
                var allWidth = parseInt(getStyle(box, 'width'));

                // 设定内层两个div的文字内容一样
                bar.innerHTML = percent + '%';
                text.innerHTML = percent + '%';

                // 修改clip的宽度值
                bar.style.clip = 'rect(0px, ' + percent / 100 * allWidth + 'px, 40px, 0px)';
            ;

            // 获取当前元素的属性值
            function getStyle(obj, attr) 
                // 兼容IE
                if (obj.currentStyle) 
                    return obj.currentStyle[attr];
                 else 
                    // 第二个参数为false是通用的写法，目的是为了兼容老版本
                    return getComputedStyle(obj, false)[attr];
                
            
        ;
    </script>
</body>

</html>

利用原生javascript实现进度条（可做页面头部进度条，或者局部进度条均可）

1<divclass="top-progress"id="js-top-progress"></div>2<scriptsrc="./static/js/progress.js"></script>3<scripttype="text/javascript">4varp=myProgress.c 查看详情

纯前端js实现的加载进度条

functionpreventRepeatedSubmit()varwidth=document.body.scrollWidth;varheight=document.body.scrollHeight;vardivBg=document.getElementById("divBg");varprogressBar=document.getElem 查看详情

学习|css3实现进度条加载

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

简单实用的进度条加载组件loader.js

本文提供一个简单的方法实现一个流程的进度条加载效果，以便在页面中可以通过它来更好地反馈耗时任务的完成进度。要实现这个功能，首先要考虑怎样实现一个静态的进度条效果，类似下面这样的：这个倒是比较简单，两个... 查看详情

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是... 查看详情

原生js做一个简单的进度条

用原生js做进度条，布局非常简单，一个盒子里放一个span标签，让它的宽度为0，并且转成块元素。主要用定时器动态增加span的宽度，并且当它的宽度大于父级盒子的宽度的时候停止效果如下：一css如下： * margin:0; padding:0; ... 查看详情

自定义view实现钟摆效果进度条pendulumview

...到了一个IOS组件PendulumView，实现了钟摆的动画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。废话不多说，先上效果图底部黑边是录制时不小心录上的，可以... 查看详情

自定义view实现钟摆效果进度条pendulumview

...到了一个IOS组件PendulumView，实现了钟摆的动画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。　　废话不多说，先上效果图　　底部黑边是录制时不小心录上... 查看详情

页面进度条

从很早之前就想知道页面的进度条是怎么实现的了，但发现好像不是自己想要的，不是就是不会，是什么flash的AS3里的方法实现获取页面加载的进度，要不就是别的，这些都是未知的领域啊，不懂，然而HTML5也有这样获取文件大... 查看详情

微信小程序实现加载进度条

参考技术Atranslate3d()CSS函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。查看详情

笔记canvas图片预加载及进度条的实现

/*star*loading模块*实现图片的预加载，并显示进度条*参数：图片数组对象，加载完成的回调函数*/functionloadImages(sources,callback){varloadedImages=0;varnumImages=0;ctx.font=‘14pxbold‘;ctx.lineWidth=5;varclearWidth=canvas.width;varclearHeigh 查看详情

如何只实现一个圆形进度条，直到图像被滑动加载

】如何只实现一个圆形进度条，直到图像被滑动加载【英文标题】：Howtoimplementonlyonecircularprogressbaruntilimagesareloadedwithglide【发布时间】：2021-08-2406:49:15【问题描述】：您好，我只想实现一个圆形进度动画，直到从滑行加载图像，... 查看详情

网站顶部显示预加载进度条preload.js

网站加载的速度快的话，不会显示进度条加载时候的样式。支持性主流浏览器都支持，ie浏览器需要9以上9也支持。使用方法<scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script><scriptsrc="js/preload.js"></script><sc... 查看详情

js实现进度条功能。

/***纯js进度条*Createdbykineron15/3/22.*/functionprogress(options){this.w=(options&&options.width)?parseFloat(options.width):parseFloat(this.options.width);this.h=(options&&options.height) 查看详情

进度条加载

NProgress.js　　NProgress是基于jquery的，且版本要 >1.8　　API:　　　　NProgress.start() —启动进度条　　　　NProgress.set(0.4) —将进度设置到具体的百分比位置　　　　NProgress.inc() —少量增加进度　　　　NProgress.done()&... 查看详情

unity3d中一步加载时进度条怎么实现啊？？要javascrip版的

functionStart() //加载名为Level的场景 varasync:AsyncOperation=Application.LoadLevelAsync("Level"); yieldasync; Debug.Log("Loadingcomplete");然后你可以在update中获取加载的进度，转化为百分比，更改scrollbar的值就好了参考技术A可以考虑搜索... 查看详情

前端页面加载进度条的制作

...cons8.com/preloaders/，制作进入条有以下几种方法。这种方法实现进度条简单粗暴，但是不是真实的。所以开发中一般不用这个。我们通过jquery来实现，这个方法开发中经常用的。查看详情

unity使用ugui实现王者荣耀ui界面加载页面（进度条）(代码片段)

文章目录【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.... 查看详情