前端之loading效果实现

最新推荐文章于 2024-06-04 11:18:31 发布
最新推荐文章于 2024-06-04 11:18:31 发布
阅读量3.3k 收藏 4
点赞数
分类专栏： 前端-练习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36251118/article/details/80873632
版权

首先分享两个loading的网站，https://loading.io/，https://icons8.com/preloaders/，可以在网站上找loading，也可以自己用css实现loading效果，css浏览器前缀可以通过http://autoprefixer.github.io/这个网站转换

接下来直接上代码

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>加载进度条</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                width:100px;
                height: 100px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                font-size: 25px;
                text-align: center;
                line-height: 100px;
            }
            .loading .pic span {
                display: block;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 10px;
                left: 10px;
                /* background: #066; */
                border-radius: 50%;
                box-shadow: 0 3px 0 #666;
                -webkit-animation: rotate 1s infinite linear;
                animation: rotate 1s infinite linear;
            }
            @-webkit-keyframes rotate {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }
            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                <!--外面的圈圈-->
                <span></span>
                <!--数据加载进度（百分比数字）-->
                <b>0%</b>
            </div>
        </div>

       ...//此处为页面需要加载的图片
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script>
            $(function(){
                var img = $("img");
                var num = 0;

                img.each(function(i){               
                    var oImg = new Image();

                    oImg.onload = function(){
                        /*清掉重复请求*/
                        oImg.onload = null;

                        num ++;
                        var load = parseInt(num/$("img").size()*100)+"%";
                        $(".loading b").html(load);
                        if(num >= i){
                            $(".loading").fadeOut();
                        }
                    }

                    oImg.src = img[i].src;
                });
            });
        </script>
    </body>
</html>

波浪loading

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条3</title>
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            .loading .pic i {
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background: #399;
                margin: 0 2px;
                /*各个竖线的高度缩小到40%的长度*/
                -webkit-transform: scaleY(0.4);
                    -ms-transform: scaleY(0.4);
                        transform: scaleY(0.4);
                /*调用动画load，动画完成总时间为1.2s，连续做动画*/
                -webkit-animation: load 1.2s infinite;
                        animation: load 1.2s infinite;
            }
            /*设置每个竖线的延长时间，第一个不用延长时间，第二个依次延长0.1s*/
            .loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
            .loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
            .loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
            .loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
            /*定义加载动画load*/
            @-webkit-keyframes load {
                0%, 40%, 100% {
                    -webkit-transform: scaleY(0.4);
                            transform: scaleY(0.4);
                }
                20% {
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
            }
            @keyframes load {
                0%, 40%, 100% {
                    -webkit-transform: scaleY(0.4);
                            transform: scaleY(0.4);
                }
                20% {
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
            }

        </style>
    </head>
    <body>
        <!-- 遮挡页面 -->
        <div class="loading">
            <div class="pic">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        ...//此处为页面需要显示的图片
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script>
            document.onreadystatechange = function(){
                if(document.readyState == "complete"){
                    $(".loading").fadeOut();
                }
            }
        </script>
    </body>
</html>
qq_597221342
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端页面加载Loading动画
pscool的博客
03-16 1939
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
11-09
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
Loading.io 不仅仅只有加载动效！| 让创建动效更加简单！
最新发布
weixin_39842602的博客
06-04 1027
Loading.io 提供的加载动画、图标和生成工具，是提升用户体验和视觉吸引力的有力工具。通过合理使用这些资源，开发者可以创建更具互动性和吸引力的用户界面，提高用户满意度和留存率。在竞争激烈的数字时代，Loading.io 是每个开发者和设计师不可或缺的利器
前端常见的loading效果
About_zero的博客
05-05 505
【代码】前端常见的loading效果。
三种 Loading 制作方案
小生方勤
01-03 447
作者：JS_Even_JS来源：https://segmentfault.com/a/1190000038692080一、简介Loading几乎是每个应用都会用到的一个组件。很多组件库都...
前端loading效果的实现
热门推荐
Maogo的专栏
08-23 1万+
说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间
loading.io一个可以直接生成loading gif图标的站点
weixin_34301132的博客
06-29 871
官网是：http://loading.io/ 进去后，可以拖动左图大小，然后点右边的make gif就可以自动生成所选大小的gif图标了，生成后会弹出一个download窗，点download下载即可。     还可以生成svg图和css代码，其生成和下载方式与gif一样。...
CSS3轻松实现清新 Loading 效果的简单实例
09-27
这两个实例展示了CSS3的强大之处，它们利用了动画关键帧、选择器、以及转换属性等，使得网页的Loading效果更加生动有趣。通过调整颜色、尺寸、动画速度等参数，可以创造出各种各样的自定义效果，满足不同项目的需求...
前端翻书加载loading效果demo可直接使用
06-01
电子图书翻页加载loading,电子书在加载的时候使用这个功能
叶子飞旋loading效果 源码程序
03-23
"叶子飞旋loading效果 源码程序"提供了一个独特且吸引人的加载动效设计，旨在抓住用户注意力并减少他们在等待内容加载时的不耐烦感。这个动效将自然元素——叶子与动态效果相结合，创造出既美观又富有创意的视觉体验...
科技感十足Loading加载特效特效代码
03-20
科技感十足Loading加载特效是一款黑色背景明暗变化loading网页加载动画特效。
纯CSS3实现的8种Loading动画效果
09-25
主要介绍了纯CSS3实现的8种Loading动画效果,效果简洁、超酷、符合当前前端的流行风格,需要的朋友可以参考下
这里推荐几个前端icon网站（动图网站）
T3165919332的博客
06-09 5189
它有不同的图标类别,其中“Animated Icons”类别下提供了丰富的动效图标,包括 SVG 动画和 Lottie 动画格式的图标。5. UniconsUnicons 是一个开源的、高质量的图标库,它提供超过 2000 个自定义图标,支持多种格式如 SVG、PNG、React、Vue 组件等。其中动效图标类型也很丰富,有加载、菜单、箭头等多种动画交互效果的图标。2. IconscoutIconscout 是一个高质量图标资源网站,里面提供了大量免费和高质量的 SVG 图标和动效图标。
loading.io 常用首页加载动画效果
masju的博客
06-06 659
新颖的loading动画效果 2、吃豆子效果 3、圆形旋转 4.双圆形 5、方块效果
分享一个有趣的前端Loading效果（前端loading）
weixin_65793170的博客
04-16 529
前端中的“loading”通常指的是页面加载过程中的加载状态，用于向用户显示页面正在加载的提示。它可以是一个旋转的加载图标、进度条、动画等形式，目的是为了让用户知道页面正在加载，并且等待的时间可能会持续一段时间。
前端各种交互效果——loading 加载效果
qq_44503730的博客
01-10 1301
效果1 源码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> :root
常用的 Loading 制作方案
happy81997的博客
02-23 295
三种 Loading 制作方案 一、简介 Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。 二、通过border-radius绘制圆环 我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个bo
从 loading 的 9 种写法谈 React 业务开发
weixin_34342905的博客
01-08 162
前言 这是一篇比较全面讲解 React 的文章，里面很多基础知识希望你自己一边查阅资料一边学习。全文从业务开发中最常用见 loading 效果不同是实现讲起，说下现在前端开发在业务上应该有的思考。 入门级操作 State 最简单的实现，我们在 Loading 组件内部声明一个状态，通过代码逻辑判断 loading 效果的展示。 expo...
loading 实现
06-07
在前端开发中，实现 loading 可以通过 CSS 和 JavaScript 来完成，具体方式如下： 1. 使用 CSS 实现 loading 动画： 可以使用 CSS 的动画效果实现 loading 动画，例如使用 @keyframes 定义动画关键帧，然后使用 animation 属性将动画应用到指定元素上。示例代码如下： ```css @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: #999; border-radius: 50%; animation: loading 1s linear infinite; } ``` 2. 使用 JavaScript 实现 loading 动画： 可以使用 JavaScript 动态创建 loading 元素，并设置其样式和动画，然后将 loading 元素添加到页面中。示例代码如下： ```javascript function showLoading() { // 创建 loading 元素 var loading = document.createElement('div'); loading.className = 'loading'; // 设置 loading 样式和动画 loading.style.width = '50px'; loading.style.height = '50px'; loading.style.border = '5px solid #ccc'; loading.style.borderTopColor = '#999'; loading.style.borderRadius = '50%'; loading.style.animation = 'loading 1s linear infinite'; // 将 loading 元素添加到页面中 document.body.appendChild(loading); } function hideLoading() { // 移除 loading 元素 var loading = document.querySelector('.loading'); if (loading) { loading.parentNode.removeChild(loading); } } ``` 以上代码实现了一个简单的 loading 动画，showLoading 函数用于显示 loading，hideLoading 函数用于隐藏 loading。可以根据实际需求调整 loading 的样式和动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值