在页面未加载完之前显示loading动画

这里有很多比这篇博客还优秀的loading动画源码

我还参考这篇博客

loading动画代码demo

我的demo预览

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>use-pseudo-class</title>

    <style>

        .loading{

            width: 100px;

            height: 100px;

            border: 1px solid red;

            position: relative;

        }

        .loading::before,.loading::after{

            content: '';

            /*这里要加一个content,不然什么都没有*/

            position: absolute;

            width: 10px;

            height: 10px;

            background: #000;

            border-radius: 50%;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            animation: toBig 1.5s linear infinite;

        }

        .loading::after{

            animation-delay: 0.75s;

            /*background-color: red;*/

        }

        @keyframes toBig {

            0%{

                width: 0;

                height: 0;

                opacity: 1;

            }

            100%{

                width: 50px;

                height:50px;

                opacity: 0;

            }

        }

    </style>

</head>

<body>

<div class="loading">

</div>

</body>

</html>

加入到实际页面的使用方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>loading动画</title>

    <!--loading style-->

    <style>

        .loading{

            width: 100px;

            height: 100px;

            /*border: 1px solid red;*/

            position: relative;

        }

        .loading::before,.loading::after{

            content: '';

            /*这里要加一个content,不然什么都没有*/

            position: absolute;

            width: 0;

            height: 0;

            background: #000;

            border-radius: 50%;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            animation: toBig 1s linear infinite;

        }

        .loading::after{

            animation-delay: 0.5s;

            /*background-color: red;*/

        }

        @keyframes toBig {

            0%{

                width: 0;

                height: 0;

                opacity: 1;

            }

            100%{

                width: 50px;

                height:50px;

                opacity: 0;

            }

        }

    </style>

    <style>

        .site-welcome{

            display: none;

            justify-content:center;

            align-items:center;

            /*里面内容居中使用flex在父元素添加三行代码display:flex;justify-content:center;

            align-items:center;*/

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            /*上面四行代码,让这个fixed铺满整个画面*/

            background-color: #ccc;

            z-index: 1;

        }

        .site-welcome.active{

            display:flex;

        }

    </style>

</head>

<body>

    <div class="site-welcome active" id="siteWelcome">

        <div class="loading">

        </div>

    </div>

    //.

    //.

    //.

    //这里是其他代码

    <script>

       //当代码加载到这里的时候,执行这个script,当代码加载到这里,说明loading该结束了

        window.onload=function(){

            var siteWelcome = document.getElementById('siteWelcome');

            siteWelcome.classList.remove('active');

        }

    </script>

</body>

</html>

本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id=hcj112010kj

在页面未加载完之前显示loading动画的更多相关文章

  1. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  2. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  3. 页面加载完之前显示Loading

    1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...

  4. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  5. 使用selenium操作ant design前端的页面，感觉页面没加载完

    因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...

  6. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  7. 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

    解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...

  8. CefSharp如何判断页面是否加载完

    问题:CefSharp如何判断页面是否加载完毕. 摘要:相信C#用CefSharp做浏览器来发的应该有很多人都会有遇到这个问题.特别是要执行JavaScript的时候,涉及到跨页面的JavaScrip ...

  9. 页面框架加载完自动执行函数$(function(){});

    页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...

随机推荐

  1. P4-可编程语言代码学习

    (1).behavioral-model 简称bmv2 P4程序首先经过p4c-bm模块编译成JSON格式的配置文件,然后将配置文件载入到bmv2中,转化成能实现交换机功能的数据结构. behavio ...

  2. 函数式编程 高阶函数 map&reduce filter sorted

    函数式编程 纯函数:没有变量的函数 对于纯函数而言:只要输入确定,那么输出就是确定的.纯函数是没有副作用的. 函数式编程:允许把函数本身作为参数传入另一个函数,还允许返回一个函数 高阶函数:一个函数的 ...

  3. 初探JVM字节码

    作者: LemonNan 原文地址: https://juejin.im/post/6885658003811827725 代码地址: https://github.com/LemonLmNan/By ...

  4. 【Linux基础】ps命令详解

    PS命令介绍 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动 ...

  5. 一文让你明白CPU上下文切换

    我们都知道,Linux 是一个多任务操作系统,它支持远大于 CPU 数量的任务同时运行.当然,这些任务实际上并不是真的在同时运行,而是因为系统在很短的时间内,将 CPU 轮流分配给它们,造成多任务同时 ...

  6. Django之 rest_framework （一基本组件）

    目录 RESTFUL 序列化 视图三部曲 认证与权限组件 解析器 分页 RESTFUL 一.什么是RESTFUL REST与技术无关代表的是一种软件架构风格,REST是Representational ...

  7. linux内存（一） 内核空间与用户空间

    来自如下网站 https://www.cnblogs.com/sparkdev/p/8410350.html 内核空间和用户空间 对 32 位操作系统而言,它的寻址空间(虚拟地址空间,或叫线性地址空间 ...

  8. phpmyadmin 4.8.1 文件包含漏

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 3．点击新建项目按钮,弹出对画框中选择(C:\ ...

  9. [USACO08OPEN]牛的街区Cow Neighborhoods

    题目描述: luogu 题解: 技巧题. 曼哈顿距离:$|x1-x2|+|y1-y2|$ 切比雪夫距离:$\max(|x1-x2|,|y1-y2|)$ 曼哈顿距离转切比雪夫距离:$(x,y)-> ...

  10. loj#6072 苹果树(折半搜索，矩阵树定理，容斥)

    loj#6072 苹果树(折半搜索,矩阵树定理,容斥) loj 题解时间 $ n \le 40 $ . 无比精确的数字. 很明显只要一个方案不超过 $ limits $ ,之后的计算就跟选哪个没关系了 ...