一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

Karen110
• 阅读 1882

大家好,我是前端进阶者,今天给大家来做个小项目,一起来看看吧~

一、前言

我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。

今天教大家JS+CSS结合做简单一个加载进度条的效果。

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

二、项目准备

软件:HBuilderX。

三、项目实现

1. body 创建2个div,外部div添加id"progress"属性, 添加 id属性 。


<div id="progress">
<div id="progress-bar"></div>
</div>

2.设置progress CSS样式。

设置宽度,高度,边框圆角,超过溢出处理,边框颜色等等属性。


#progress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
}

3.设置progress-bar CSS样式。

设置宽度,高度,行高,文字颜色,背景颜色等等属性。

#progress-bar {
background-color: #d9534f;
width: 10px;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
color: white;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}

4. 设置 创建两个按钮,添加点击事件。


<button onclick="start()">开始进度</button>
<button onclick="stop()">结束进度</button>

5.start()方法,添加定时器。


function start() {
t = setInterval(progress, 60);
}

6.判断当进度条到100%时,停止定时器,没有到达,再执行方法。


function progress() {
if (i < 100) {
i++;
bar.style.width = i + "%";
bar.innerHTML = i + " %";
} else {
clearInterval(t);
}
}

7. 设置stop()方法,移除定时器, 停止执行。

function stop() {
clearInterval(t);
}

8. 调用方法,实现效果。

四、效果展示

1、f12运行到chrome浏览器。

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

2、点击开始进度按钮,加载进度。显示进度加载情况。

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

3、加载到100% 停止定时器!

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

4、按钮结束进度按钮,停止定时器。直接从当前进度停止。

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

五、总结

  1. 本项目,事件监听遇到的一些难点进行了分析及提供解决方案。

  2. 欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

  3. HTML+CSS也可以做出网站页面的效果,在上面显示图片标题的地方不能用绝对定位,于是用的relative定位,这个地方是布局的核心部分,否则无法将文字放在图片之上。

  4. 此进度条是DIV+CSS制作实现,通过对DIV宽度按照百分比来实现百分比进度条效果,大家可以将背景美化、边框美化实现自己需要的漂亮美化的进度条效果。

  5. 代码很简单,希望对你有所启发。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

往期精彩文章推荐:

一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Python进阶者 Python进阶者
2年前
手把手教你使用JavaScript打造一款扫雷游戏
大家好,我是皮皮。扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏。废话不多说,直接看下效果;上图是失败后的结果。一、思路分析我们新建一个首页,在首页放置一个点击开始游戏的按钮,动态生成100个小格,即100div;然后通过点击div进行扫雷操作,然后扫雷成功或者失败显示对应的结果;二、静态页面搭建2.1结构层
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
2年前
使用Node.js还可以发邮件?
前言今天,我们给大家开发一个小效果。篇幅比较短,主要给大家展示效果。实战1.首先我们初始化一个Node项目npm init y2.创建一个app.js文件'use strict';const nodemailer  require('nodemaile
Stella981 Stella981
2年前
React Native (一) react
ReactNative(一)reactnativevideo实现音乐播放器和进度条的功能功能:1.卡片滑动切歌2.显示进度条效果图:!(https://oscimg.oschina.net/oscnet/3c
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
2年前
CSS3实现页面加载进度条
什么情况下会使用到页面加载进度条?当页面中的需要加载的内容很多,用户直接进入则看不到任何内容,体验不好,这个时候就需要使用到页面加载的一个动画,在页面加载结束后再显示主体内容。实现页面加载进度条有哪几种方式?一般可分为两种,1.设置多少时间后显示页面,2.根据页面加载的文档状态来实现如何根据文档状态来实现?
Stella981 Stella981
2年前
Chrome扩展程序一键生成网页骨架屏
对于依赖接口渲染的页面,在拿到数据之前页面往往是空白的,为了提示用户当前正在加载中,往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言,实现比较简单;本文主要研究骨架屏的应用及实现,并给出一种使用Chrome扩展工具快速生成骨架屏的方案。首先看看效果先放一个动图展示!(https://oscimg.oschina
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这