文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 18:34

关注

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

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

 

 

 

 

二、项目准备

软件:HBuilderX。

三、项目实现

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

  1. "progress"
  2. "progress-bar">
 
  •  

     

     

     

    设置progress CSS样式。

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

     

    1. #progress { 
    2. width: 100%; 
    3. height: 30px; 
    4. position: relative
    5. background-color: #ddd; 
    6. border-radius: 10px; 
    7. overflow: hidden; 

    设置progress-bar CSS样式。

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

     

    1. #progress-bar { 
    2. background-color: #d9534f; 
    3. width: 10px; 
    4. height: 30px; 
    5. line-height: 30px; 
    6. position: absolute
    7. text-align: center; 
    8. color: white; 
    9. 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); 
    10. background-size: 40px 40px; 

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

    1. "start()">开始进度 
    2. "stop()">结束进度 

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

     

    1. function start() { 
    2. t = setInterval(progress, 60); 

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

     

    1. function progress() { 
    2. if (i < 100) { 
    3. i++; 
    4. bar.style.width = i + "%"
    5. bar.innerHTML = i + " %"
    6. else { 
    7. clearInterval(t); 

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

     

    1. function stop() { 
    2. clearInterval(t); 

    调用方法,实现效果。

    四、效果展示

    f12运行到chrome浏览器。

     

     

     

     

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

     

     

     

     

    加载到100% 停止定时器!

     

     

     

     

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

     

     

     

     

    五、总结

    1. 本项目,事件监听遇到的一些难点进行了分析及提供解决方案。
    2. 欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
    3. HTML+CSS也可以做出网站页面的效果,在上面显示图片的地方不能用绝对定位,于是用的relative定位,这个地方是布局的核心部分,否则无法将文字放在图片之上。
    4. 此进度条是DIV+CSS制作实现,通过对DIV宽度按照百分比来实现百分比进度条效果,大家可以将背景美化、边框美化实现自己需要的漂亮美化的进度条效果。
    5. 代码很简单,希望对你有所启发。

     

    来源:前端进阶学习交流内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯