<div class="index-html-loader">
  <div class="text">Loading...</div>
<div class="horizontal">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="vertical">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<style>
/* Start the loader code, first, let's align it the center of screen */
.index-html-loader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-mos-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
/* disable selection and cursor changes */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}

/* Text align it the center of screen and connect the looped animation for 2 seconds */
.index-html-loader .text {
position: absolute;
left: -1.3em;
top: -1.7em;
-webkit-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-ms-animation: text 2s infinite;
-o-animation: text 2s infinite;
animation: text 2s infinite;
}

/* Set for the first layer vertical position */
.index-html-loader .vertical {
position: absolute;
top: -1.84em;
left: -0.4em;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

/* Set for the second layer horizontal position */
.index-html-loader .horizontal {
position: absolute;
top: 0em;
left: 0em;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

/* The next two classes do mirror for animation */
.index-html-loader .circlesup {
position: absolute;
top: -4.7em;
right: 12.1em;
}

.index-html-loader .circlesdwn {
position: absolute;
top: 2.5em;
right: -13.5em;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

/* Create a container for our circles, rotate it 45 degrees and set animation*/
.index-html-loader .circle {
position: absolute;
width: 15em;
height: 15em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-ms-animation: orbit 2s infinite;
-o-animation: orbit 2s infinite;
animation: orbit 2s infinite;
z-index: 5;
}

/* Style's of our circles */
.index-html-loader .circle:after {
content: '';
position: absolute;
width: 2em;
height: 2em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
background: #13A3A5;
/* Pick a color 1*/
}

.index-html-loader .circle:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
z-index: 4;
}

.index-html-loader .circle:nth-child(2):after {
background: #56bebf;
/* Pick a color 2*/
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}

.index-html-loader .circle:nth-child(3) {
-webkit-animation-delay: 225ms;
-moz-animation-delay: 225ms;
-ms-animation-delay: 225ms;
-o-animation-delay: 225ms;
animation-delay: 225ms;
z-index: 3;
}

.index-html-loader .circle:nth-child(3):after {
background: #ffa489;
/* Pick a color 3*/
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
}

.index-html-loader .circle:nth-child(4) {
-webkit-animation-delay: 350ms;
-moz-animation-delay: 350ms;
-ms-animation-delay: 350ms;
-o-animation-delay: 350ms;
animation-delay: 350ms;
z-index: 2;
}

.index-html-loader .circle:nth-child(4):after {
background: #ff6d37;
/* Pick a color 4*/
-webkit-transform: scale(0.4, 0.4);
-moz-transform: scale(0.4, 0.4);
-ms-transform: scale(0.4, 0.4);
-o-transform: scale(0.4, 0.4);
transform: scale(0.4, 0.4);
}

.index-html-loader .circle:nth-child(5) {
-webkit-animation-delay: 475ms;
-moz-animation-delay: 475ms;
-ms-animation-delay: 475ms;
-o-animation-delay: 475ms;
animation-delay: 475ms;
z-index: 1;
}

.index-html-loader .circle:nth-child(5):after {
background: #DB2F00;
/* Pick a color 5*/
-webkit-transform: scale(0.2, 0.2);
-moz-transform: scale(0.2, 0.2);
-ms-transform: scale(0.2, 0.2);
-o-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
}

/* Animation keys */

@keyframes orbit {
0% {
transform: rotate(45deg);
}

5% {
transform: rotate(45deg);
animation-timing-function: ease-out;
}

70% {
transform: rotate(405deg);
animation-timing-function: ease-in;
}

100% {
transform: rotate(405deg);
}
}

@keyframes text {
0% {
transform: scale(0.2, 0.2);
animation-timing-function: ease-out;
}

50% {
transform: scale(1, 1);
animation-timing-function: ease-out;
}

60% {
transform: scale(1, 1);
animation-timing-function: ease-out;
}

100% {
transform: scale(0.2, 0.2);
}
}
</style>


css 启动页 loading动画的更多相关文章

  1. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  2. CSS制作简单loading动画

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  3. css制作简单loading动画效果【css3 loading加载动画】

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  4. iOS关于启动页自定义特殊处理

    平常开发中对于启动页可能会有一些特别的要求,比如在启动页加动画或加一些按键可以响应事件等,最近项目中要在启动页增加版本号,因为版本号是不断的改变,所以要动态实现把它加到启动页上:在XCode上面配置的 ...

  5. 教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)

    教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...

  6. electron-vue 项目添加启动loading动画问题

    前言 electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差 ...

  7. IOS启动页动画(uiview 淡入淡出效果 )2

    Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...

  8. 巧用 CSS 实现动态线条 Loading 动画

    有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div&g ...

  9. 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  10. 【IOS】模仿"抽屉新热榜"动态启动页YFSplashScreen

    IOS最好要设置系统默认启动页面,不然进入应用就会突然闪现黑色画面 下图是我们要实现的效果: 总体思路:设置一个系统默认启动页面,在进入didFinishLaunchingWithOptions时, ...

随机推荐

  1. wibu软授权(五)

    本篇将尝试根据RAU的asn1定义手动生成一份自定义的RAU文件,看看能不能通过wibu软授权系统的验证 准备工具 python3 asn1tools Ubuntu 18.04 CodeMeter R ...

  2. 在orangepi 3 lts上使用SmartCardReader(读卡器)

    前期工作 orangepi 3 lts使用全志的H6芯片,通过查询该芯片的datasheet和user manual,可以发现H6有两个scr接口,分别为scr0和scr1,理论上是支持读卡器接口的, ...

  3. ASP.net EF动态映射实体

    1.配置EF与建立实体模型这里不做过多介绍.主要介绍如何动态映射实体模型 1.1.实现过程有很多种方式我们这里使用接口.然后扫描所有继承了该接口的实体类然后映射(也可以自行扩展使用特性) 首先我们新建 ...

  4. FPGA MIG调试bug(二)

    目标器件:复旦微FPGA:JFM7K325T8FCBGA676(对标Xilinx Kintex-7系的XC7K325T) 工程背景:送入FPGA的外部时钟为差分时钟,时钟送入FPGA后,经过PLL输出 ...

  5. emacs config on win10 for rust 1

    native win32 (setq package-archives '(("gnu" . "http://mirrors.ustc.edu.cn/elpa/gnu/& ...

  6. Installing Superset最新版本安装(笔记)

    官方文档:https://superset.apache.org/docs/installation/installing-superset-from-scratch 由于在centos上安装有各种问 ...

  7. vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?

    需求:将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; ...

  8. JS:获取元素属性

    元素上属性字段 const el = document.getElementById('documentLabel') console.log(el.clientWidth) // 可见区域宽 con ...

  9. JavaScript 数字与字符串的加减乘除运算

    点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.

  10. 初学银河麒麟linux笔记 第三章 QT缺少的模块下载、更新软件源操作

    在共享文件夹里将WINDOWS里已经编写好的QT程序编译之后,提示 Qt5: Unknown module(s) in QT: serialport 经查询,需要安装对应的模块库,写入 sudo ap ...