css手写动态加载中...

<!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>Document</title>
    <style>
        .box {
            margin: 200px;
        }

        .load-indicator {
            font-size: 16px;
            color: black;

        }

        .span {
            display: inline-block;
            overflow: hidden;
            height: 1em;
            line-height: 1;
            vertical-align: -.25em;

        }

        .span::after {
            display: block;
            white-space: pre-wrap;
            content: "...\A..\A.";
            animation: loading 3s infinite step-start both;
        }

        @keyframes loading {
            33% {
                transform: translate3d(0, -2em, 0);
            }

            66% {
                transform: translate3d(0, -1em, 0);
            }
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="load-indicator">加载中<span class="span"></span></div>
    </div>
</body>
</html>

原文地址：https://www.cnblogs.com/qlongbg/p/12193661.html

时间： 2024-09-29 19:59:42

css手写动态加载中...的相关文章

WPF 仪表盘 刻度盘 动态 加载中 开源

原文:WPF 仪表盘 刻度盘 动态 加载中 开源 1. 表盘 参数可以设置, codeproject上写的.网址在这里. 源码里有demo,很详细. 源码在这里. 2. 动态Loading 截图效果跟实际有点不一样. 自己把源码写成 资源就好用了呗 地址在这里 3.  有两个类似的                              地址1  地址2 原文地址:https://www.cnblogs.com/lonelyxmas/p/9689224.html

动态加载js css 插件

简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两个前端模块加载器为require.js与sea.js,这两款模块加载器都不错.但是呢,有时候我仅仅需要的只是动态加载一个js,不需要把代码模块化,那我们只能自己手写一个加载函数. 简单的加载js /** * HTML动态加载js * @path {String} src地址必须带有后缀名.js *

动态加载js,css(项目中需要的)

最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面配置的域名是正式服的域名,但是却检测到了我测试服的访问量,这就尴尬了,然后就想到了动态加载js 1.动态加载js文件 我们要把这块链接加入页面 <script src="js/count.js"></script> 具体代码实现如下 function loadJs(

js插件动态加载js、css解决方案

最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的变量,那就会报错,靠~~悲催了,就是说js如果动态加载(非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载,这样就不会出现问题)那加载的文件是异步进行的,难怪啊!然后在网上找了些资料说用ajax同步加载,然后我试了真可以,下面就是我的代码分享出来给大家,但是注意这样

JavaScript_动态加载CSS和JS文件

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var dynamicLoading = {   css: function(path){  if(!path || path.length === 0){   throw new Error('argument "path" is required !');

C#中动态加载和卸载DLL

在C++中加载和卸载DLL是一件很容易的事,LoadLibrary和FreeLibrary让你能够轻易的在程序中加载DLL,然后在任何地方 卸载.在C#中我们也能使用Assembly.LoadFile实现动态加载DLL,但是当你试图卸载时,你会很惊讶的发现Assembly没有提供任何 卸载的方法.这是由于托管代码的自动垃圾回收机制会做这件事情,所以C#不提供释放资源的函数,一切由垃圾回收来做.  这引发了一个问题,用Assembly加载的DLL可能只在程序结束的时候才会被释放,这也意味着在程序运

jquery动态加载js/css文件方法

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="

在mvc中动态加载菜单

最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行修改,但是,缺点也很明显,实现起来有一定的难度,如果菜单多的话,在前台首次加载时,页面就会变慢,我想谈谈自己在这方面的经验 首先, 我们要创建两个表,(其实一个表也可以了,不过那样的话会变得比较复杂), 一个一级分类表, 一个二级分类表, 两个表的结构如下 : 一个是一级分类表,对应的就是父级菜单,

[AngularJS] 使用AngularCSS动态加载CSS

[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如何使用AngularAMD来动态加载Controller与Service.本篇文章以此为基础,介绍如何使用AngularCSS来动态加载CSS,让项目功能更加模块化,增加开发与维护的工作效率.主要为自己留个纪录,也希望能帮助到有需要的开发人员. AngularCSS 安装 本篇文章以「使用Angul