当前位置:网站首页>Simple loading animation
Simple loading animation
2022-07-07 17:38:00 【Zi Yu】
style
.page-loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.page-loading-div{
width: 100%;
height: 100px;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px;
}
.page-loading-box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 80px;
color: rgba(255,255,255,0.4);
text-align: center;
margin: 0 auto;
border-radius: 100px;
overflow: hidden;
opacity: 0.8;
position: relative;
background-color: rgba(255,255,255,0.2);
}
.page-loading-box .glyphicon{
line-height: 100px;
animation-name: rotate360;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 1.4s;
}
.page-loading-text{
line-height: 100px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
text-align: center;
}
.page-loading-text>span{
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 2s;
}
.page-loading-text>span:nth-of-type(1){
animation-name: pointShine1;
}
.page-loading-text>span:nth-of-type(2){
animation-name: pointShine2;
}
.page-loading-text>span:nth-of-type(3){
animation-name: pointShine3;
}
@keyframes rotate360 {
0%{
transform: rotate(0);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes pointShine1 {
0% {
opacity: 0;
}
32% {
opacity: 1;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pointShine2 {
0% {
opacity: 0;
}
32% {
opacity: 0;
}
64% {
opacity: 1;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pointShine3 {
0% {
opacity: 0;
}
64% {
opacity: 0;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Code class
/** * loading Animation */
function Loading() {
this.loadings = [];
// this.loadingHtml = '<div class="page-loading">'
this.loadingHtml = '<div class="page-loading-div">'
+ '<div class="page-loading-box">'
+ '<i class="glyphicon glyphicon-refresh"></i>'
+ '<div class="page-loading-text"> Loading <span>.</span><span>.</span><span>.</span></div>'
+ '</div>'
+ '</div>'
// + '</div>';
}
Loading.prototype.doLoading = function(){
let code = Math.floor(Math.random() * 100000);
this.loadings.push(code);
let bodyDom = document.getElementsByTagName('body');
if(bodyDom.length > 0){
let childsDoms = bodyDom[0].childNodes;
let isInsert = false;
if(childsDoms && childsDoms.length > 0){
for(var i = 0; i< childsDoms.length; i++){
let childDom = childsDoms[i];
let className = childDom && childDom.className;
className = className != null && className != undefined ? className : '';
if(className.indexOf('page-loading') >= 0){
isInsert = true;
}
}
}
if(!isInsert){
var DIV = document.createElement("DIV");
DIV.className = 'page-loading';
DIV.innerHTML = this.loadingHtml;
bodyDom[0].appendChild(DIV);
}
}
return code;
}
Loading.prototype.removeLoadingDom = function() {
let bodyDom = document.getElementsByTagName('body');
if(bodyDom.length > 0){
let childsDoms = bodyDom[0].childNodes;
if(childsDoms && childsDoms.length > 0){
for(var i = 0; i< childsDoms.length; i++){
let childDom = childsDoms[i];
// console.log(childDom, childDom.className);
let className = childDom && childDom.className;
className = className != null && className != undefined ? className : '';
if(className.indexOf('page-loading') >= 0){
bodyDom[0].removeChild(childDom);
}
}
}
}
}
Loading.prototype.closeLoading = function(code){
let {
loadings } = this;
if(loadings && loadings.length > 0){
let index = loadings.indexOf(code);
if(index > -1){
loadings.splice(index, 1);
}
}
if(loadings && loadings.length == 0){
this.removeLoadingDom();
}
}
Loading.prototype.closeAllLoading = function() {
this.loadings = [];
this.removeLoadingDom();
}
Loading.prototype.getLoadings = function() {
let {
loadings } = this;
return loadings && loadings.length > 0 ? loadings : [];
}
Loading.prototype.checkIsInLoading = function(code){
let {
loadings } = this;
return loadings && loadings.length > 0 && loadings.indexOf(code) > -1;
}
Use
let loading = new Loading();
let loadCode = loading.doLoading();
setTimeout(function() {
loading.closeLoading(loadCode);
}, 2000)
effect
边栏推荐
- MySQL usage notes 1
- Show progress bar above window
- Please insert the disk into "U disk (H)" & unable to access the disk structure is damaged and cannot be read
- 【解惑】App处于前台,Activity就不会被回收了?
- 第二十四届中国科协湖南组委会调研课题组一行莅临麒麟信安调研考察
- 目标管理【管理学之十四】
- Repair method of firewall system crash and file loss, material cost 0 yuan
- 无法链接远程redis服务器(解决办法百分百)
- 【信息安全法律法規】複習篇
- DevOps 的运营和商业利益指南
猜你喜欢
机器视觉(1)——概述
【TPM2.0原理及应用指南】 5、7、8章
Devops' operational and commercial benefits Guide
DatePickerDialog and trimepickerdialog
麒麟信安中标国网新一代调度项目!
[video / audio data processing] Shanghai daoning brings you elecard download, trial and tutorial
Alertdialog create dialog
目标检测1——YOLO数据标注以及xml转为txt文件脚本实战
Create dialog style windows with popupwindow
A tour of grpc:03 - proto serialization / deserialization
随机推荐
麒麟信安中标国网新一代调度项目!
运行yolo v5-5.0版本报错找不到SPPF错误,进行解决
使用popupwindow創建对话框风格的窗口
redis主从、哨兵主备切换搭建一步一步图解实现
大笨钟(Lua)
目标管理【管理学之十四】
imageswitcher的功能和用法
Leetcode brush questions day49
第2章搭建CRM项目开发环境(数据库设计)
Functions and usage of viewflipper
本周小贴士#134:make_unique与私有构造函数
本周小贴士131:特殊成员函数和`= default`
数值 - number(Lua)
赋能智慧电力建设 | 麒麟信安高可用集群管理系统,保障用户关键业务连续性
请将磁盘插入“U盘(H)“的情况&无法访问 磁盘结构损坏且无法读取
【OKR目标管理】价值分析
本周小贴士#135:测试约定而不是实现
Establishment of solid development environment
ViewSwitcher的功能和用法
【可信计算】第十三次课:TPM扩展授权与密钥管理