html各种加载动画

html加载动画

1.转圈圈
2.三个点
3.转圈圈第二版(css更高端)
4.三条杠
5.画个圆
6.画个圆第二版
7.网上模板
8.艺术之美，程序之美

1.我都是引入本地的js，css
bootstrap链接: https://v3.bootcss.com.

2.可以引入官方的，本地测可以，部署到服务器可能不行

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

3.jquery链接: https://jquery.com.

1.转圈圈

1.图片

2.代码 load.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>load</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">#logo {box-sizing: border-box;position: absolute;width: 100%;height: 100px;}.gif {position:absolute;/*声明绝对定位*/left:0;/*在页面最左侧对齐*/top:0;/*在页面最上方对齐*/height:100vh;/*高度是相对屏幕高度的100%*/width:100vw;/*宽度是相对屏幕宽度的100%*/z-index:1;/*设置元素优先级为1级*/display:none;/*设置元素隐藏*/align-items: center;/*让子元素横向居中(声明flex后有效)*/justify-content: center;/*让子元素垂直居中(声明flex后有效)*/}.gif>img {height:11%;width:11%;}</style>
<script type="text/javascript">window.onload = function(){$(".gif").css("display","flex");}
</script>
<body>
<div id="logo"><img src="../static/img/logo.svg">
</div>
<div class = "gif"><img src = "../static/img/load.gif"/>
</div>
</body>
</html>

2.三个点

2.1样式图片
动画效果第七个: https://www.webhek.com/post/css-loaders.html.

2.2load.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>Data Pipeline</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">#logo {box-sizing: border-box;position: absolute;width: 100%;height: 100px;}#logo > img {margin: auto;width: 550px;height: 65px;position: absolute;top: 10%;left: -150px;}.loading-overlay {content: "";position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;opacity: .8;background: rgba(0, 0, 0, 0.1);transition: all .6s;}.sk-three-bounce {position: absolute;top: 60%;left: 48%;opacity: .8;}.sk-three-bounce .sk-child {width: 20px;height: 20px;background-color: salmon;border-radius: 100%;display: inline-block;-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;}.sk-three-bounce .sk-bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}.sk-three-bounce .sk-bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}.sk-three-bounce .sk-bounce3 {-webkit-animation-delay: -0.08s;animation-delay: -0.08s;}@-webkit-keyframes sk-three-bounce {0%,80%,100% {-webkit-transform: scale(0);transform: scale(0);}40% {-webkit-transform: scale(1);transform: scale(1);}}@keyframes sk-three-bounce {0%,80%,100% {-webkit-transform: scale(0);transform: scale(0);}40% {-webkit-transform: scale(1);transform: scale(1);}}</style>
<script type="text/javascript"></script>
<body>
<div id="logo"><img src="../static/img/logo.svg">
</div>
<div><h1 align="center"> Loading demo</h1>
</div>
<div id="loading" class="sk-three-bounce"><div class="loading-overlay"></div><div class="sk-child sk-bounce1"></div><div class="sk-child sk-bounce2"></div><div class="sk-child sk-bounce"></div>
</div></body>
</html>

3.转圈圈第二版(css更高端)

3.1动画样式
动画效果第四个: https://www.webhek.com/post/css-loaders.html.

3.2 loading.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>loading</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">body{background: #56b4ab;}.loader {font-size: 20px;margin: 45% auto;width: 1em;height: 1em;border-radius: 50%;position: relative;text-indent: -9999em;/* liner：规定以相同速度开始至结束的过渡效果*/animation: load4 1.3s infinite linear;}@keyframes load4 {0%,100% {box-shadow:0em -3em 0em 0.2em #ffffff,2em -2em 0 0em #ffffff,3em 0em 0 -0.5em #ffffff,2em 2em 0 -0.5em #ffffff,0em 3em 0 -0.5em #ffffff,-2em 2em 0 -0.5em #ffffff,-3em 0em 0 -0.5em #ffffff,-2em -2em 0 0em #ffffff;}12.5% {box-shadow:0em -3em 0em 0em #ffffff,2em -2em 0 0.2em #ffffff,3em 0em 0 0em #ffffff,2em 2em 0 -0.5em #ffffff,0em 3em 0 -0.5em #ffffff,-2em 2em 0 -0.5em #ffffff,-3em 0em 0 -0.5em #ffffff,-2em -2em 0 -0.5em #ffffff;}25% {box-shadow:0em -3em 0em -0.5em #ffffff,2em -2em 0 0em #ffffff,3em 0em 0 0.2em #ffffff,2em 2em 0 0em #ffffff,0em 3em 0 -0.5em #ffffff,-2em 2em 0 -0.5em #ffffff,-3em 0em 0 -0.5em #ffffff,-2em -2em 0 -0.5em #ffffff;}37.5% {box-shadow:0em -3em 0em -0.5em #ffffff,2em -2em 0 -0.5em #ffffff,3em 0em 0 0em #ffffff,2em 2em 0 0.2em #ffffff,0em 3em 0 0em #ffffff,-2em 2em 0 -0.5em #ffffff,-3em 0em 0 -0.5em #ffffff,-2em -2em 0 -0.5em #ffffff;}50% {box-shadow:0em -3em 0em -0.5em #ffffff,2em -2em 0 -0.5em #ffffff,3em 0em 0 -0.5em #ffffff,2em 2em 0 0em #ffffff,0em 3em 0 0.2em #ffffff,-2em 2em 0 0em #ffffff,-3em 0em 0 -0.5em #ffffff,-2em -2em 0 -0.5em #ffffff;}62.5% {box-shadow:0em -3em 0em -0.5em #ffffff,2em -2em 0 -0.5em #ffffff,3em 0em 0 -0.5em #ffffff,2em 2em 0 -0.5em #ffffff,0em 3em 0 0em #ffffff,-2em 2em 0 0.2em #ffffff,-3em 0em 0 0em #ffffff,-2em -2em 0 -0.5em #ffffff;}75% {box-shadow:0em -3em 0em -0.5em #ffffff,2em -2em 0 -0.5em #ffffff,3em 0em 0 -0.5em #ffffff,2em 2em 0 -0.5em #ffffff,0em 3em 0 -0.5em #ffffff,-2em 2em 0 0em #ffffff,-3em 0em 0 0.2em #ffffff,-2em -2em 0 0em #ffffff;}87.5% {box-shadow:0em -3em 0em 0em #ffffff,2em -2em 0 -0.5em #ffffff,3em 0em 0 -0.5em #ffffff,2em 2em 0 -0.5em #ffffff,0em 3em 0 -0.5em #ffffff,-2em 2em 0 0em #ffffff,-3em 0em 0 0em #ffffff,-2em -2em 0 0.2em #ffffff;}}
</style>
<script type="text/javascript"></script>
<body>
<div class = "loader">
</div></body>
</html>

4.三条杠

4.1动画样式
动画效果第一个: https://www.webhek.com/post/css-loaders.html.

4.2loading.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>loading</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">body{background: #56b4ab;}.loader,.loader:before,.loader:after {background: #FFF;/** load1：执行的动画名* 1s：执行一秒* infinite：执行无限次* ease-in-out：动画以低速开始和结束*/animation: load1 1s infinite ease-in-out;width: 1em;height: 4em;}.loader:before,.loader:after {position: absolute;top: 0;content: '';}.loader:before {left: -1.5em;}.loader {text-indent: -9999em;margin: 40% auto;position: relative;font-size: 11px;/* 延时0.16s */animation-delay: 0.16s;}.loader:after {left: 1.5em;/* 延时0.32s */animation-delay: 0.32s;}@keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {/* 实现上部拉伸 */box-shadow: 0 -2em #ffffff;/* 实现下部拉伸 */height: 5em;}}</style>
<script type="text/javascript"></script>
<body>
<div class = "loader">
</div></body>
</html>

5.画个圆

5.1动画样式
动画效果第二个: https://www.webhek.com/post/css-loaders.html.

5.2loading.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>loading</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">body{background: #56b4ab;}.loader,.loader:before,.loader:after {border-radius: 50%;}.loader:before,.loader:after {position: absolute;top: -0.1em;content: '';width: 5.2em;height: 10.2em;background: #56b4ab;}.loader {font-size: 11px;text-indent: -99999em;margin: 30% auto;position: relative;width: 10em;height: 10em;box-shadow: inset 0 0 0 1em #FFF;}.loader:before {border-radius: 10.2em 0 0 10.2em;left: -0.1em;/* 设置旋转元素的基点位置 */transform-origin: 5.2em 5.1em;/** load2：执行的动画名* 2s：执行2秒* infinite：执行无限次* 1.5s：延时1.5秒*/animation: load2 2s infinite 1.5s;}.loader:after {border-radius: 0 10.2em 10.2em 0;left: 5.1em;transform-origin: 0px 5.1em;animation: load2 2s infinite;}@keyframes load2 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
<script type="text/javascript"></script>
<body>
<div class = "loader">
</div></body>
</html>

6.画个圆第二版

6.1动画样式
动画效果第三个: https://www.webhek.com/post/css-loaders.html.

6.2loading.html

<html xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html"><html>
<head><meta charset="UTF-8"><title>loading</title><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"><script type="application/javascript" src="../static/js/jquery-3.4.1.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../static/js/bootstrap.min.js"></script>
</head><style type="text/css">body{background: #56b4ab;}.loader {font-size: 10px;margin: 30% auto;text-indent: -9999em;width: 11em;height: 11em;border-radius: 50%;/* 线性渐变，从左到右，从白色到透明，0％代表起点和100％是终点 */background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);position: relative;animation: load3 1.4s infinite linear;}.loader:before,.loader:after{content: '';position: absolute;top: 0;left: 0;}.loader:before {width: 50%;height: 50%;background: #FFF;border-radius: 100% 0 0 0;}.loader:after {background: #56b4ab;width: 75%;height: 75%;border-radius: 50%;margin: auto;bottom: 0;right: 0;}@keyframes load3 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
<script type="text/javascript"></script>
<body>
<div class = "loader">
</div></body>
</html>

7.网上模板

下载链接: 分享web前端七款HTML5 Loading动画特效集锦.

1、HTML5 Canvas发光Loading动画
点击此处在线演示1.

2、HTML5/CSS3粒子效果进度条
点击此处在线演示2.

3、HTML5 SVG Loading 动画加载特效
点击此处在线演示3.

4、四组欢乐的CSS3 Loading加载动画
点击此处在线演示4.

5、jQuery自定义Loading动画插件spin.js
点击此处在线演示5.

6、CSS3 3D立方体Loading加载动画特效
点击此处在线演示6.

7、CSS3 Loading进度条加载动画特效 3款绚丽风格
点击此处在线演示7.

8.艺术之美，程序之美

程序员的浪漫，你get到了吗！！！！
超炫酷加载动画: https://www.html5tricks.com/tag/loading动画.

总有一款是你的菜，把你拿捏的死死的
简单实用加载动画: https://www.html5tricks.com/demo/css3-loading-cool-styles/index.html.

html各种加载动画相关推荐

css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
真是好东西！一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
如何使用jQuery创建“请稍候，正在加载...”动画？
我想在我的网站上放置一个"请稍等,加载中"的旋转圆圈动画. 我应该如何使用jQuery完成此操作? #1楼 Jonathon的出色解决方案在IE8中中断(动画完全不显示). 要解决 ...
.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...
8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
vue ajax加载动画,vue 请求加载数据的时候如何显示加载动画
提醒一下:建议把ajax的请求,拆分成一个独立的sdk,避免多处重复代码. that.loading(false);应该写到ajax执行结束后. var lhcmDetail=new Vue({ el ...

html各种加载动画

html加载动画

1.转圈圈

2.三个点

3.转圈圈第二版(css更高端)

4.三条杠

5.画个圆

6.画个圆第二版

7.网上模板

8.艺术之美，程序之美

html各种加载动画相关推荐

最新文章

热门文章