csxy_dgut202235010623
/
568tools
mirror of https://github.com/PJ-568/568tools.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

添加页面加载动画

Browse Source
main
PJ568 2 years ago
parent 23ef4c3692
commit 77c26cb6b3
11 changed files with 178 additions and 10 deletions
Show Stats Download Patch File Download Diff File

8
404.html
Unescape View File

@ -1,13 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;|&nbsp;404</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script>
</head>
<body>
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<div id="list" class="nav_content">
<div class="item info">

8
about/index.html
Unescape View File

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<script src="/js/loading.js"></script>
<title>关于&nbsp;568Tools&nbsp;在线工具箱</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
@ -10,6 +11,11 @@
<script src="https://cdn.jsdelivr.net/npm/marked@3.0.0/marked.min.js"></script>
</head>
<body>
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<div id="list" class="nav_content">
<div class="item info">

8
comment/index.html
Unescape View File

@ -4,12 +4,18 @@
<meta charset="utf-8"/>
<meta property="og:title" content="568Tools&nbsp;|&nbsp;Comment" />
<meta name="description" content="568Tools 在线工具箱的评论界面。">
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;|&nbsp;Comment</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script>
</head>
<body>
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<div id="list" class="nav_content">
<div class="item info">
@ -28,7 +34,7 @@
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="https://Tools.pj568.eu.org/css/568_comment.css"
data-theme="https://Tools.pj568.eu.org/img/loading_b.svg"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"

85
css/tool_type.css
Unescape View File

@ -402,4 +402,87 @@ ins.adsbygoogle[data-ad-status="unfilled"]{
}
#rcb_menu>#rcb_t6{
display: none
}
}
/*********LoadingPage*************/
#loading {
position: absolute;
background-color: #424242;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000000;
}
#loading_bg{
background-color: rgba(0,0,0,0.7);
}
.loader {
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
color: #0277BD;
letter-spacing: 0.2em;
}
.loader::before, .loader::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: #0277BD;
position: absolute;
-webkit-animation: load .7s infinite alternate ease-in-out;
animation: load .7s infinite alternate ease-in-out;
}
.loader::before {
top: 0;
}
.loader::after {
bottom: 0;
}
@-webkit-keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}
@keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}
/********************************/

10
img/loading_a.svg
Unescape View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(50,50)">
<g transform="scale(0.7)">
<circle cx="0" cy="0" r="50" fill="#01579b"></circle>
<circle cx="0" cy="-28" r="15" fill="#00b0ff">
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 0 0;360 0 0"></animateTransform>
</circle>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 560 B

14
img/loading_b.svg
Unescape View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<rect x="17.5" y="30" width="15" height="40" fill="#0277bd">
<animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="18;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
<animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="64;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
</rect>
<rect x="42.5" y="30" width="15" height="40" fill="#01579b">
<animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
<animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
</rect>
<rect x="67.5" y="30" width="15" height="40" fill="#00b0ff">
<animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
<animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

8
incert/defualt.html
Unescape View File

@ -1,12 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;|&nbsp;提示</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
</head>
<body>
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<div id="list" class="nav_content">
<div class="item info">

8
incert/index.html
Unescape View File

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;|&nbsp;插入页面</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
@ -29,6 +30,11 @@
</script>
</head>
<body style="display:block;height:calc(100% - 42px)">
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<include src="/header.html"></include>
<iframe id="myIframe" width="100%" style="display:block;height:100%;border:none" src="/incert/defualt.html"></iframe>

6
index.html
Unescape View File

@ -3,11 +3,17 @@
<head>
<meta charset="utf-8"/>
<meta name="description" content="568Tools 在线工具箱是在线工具的集合。使用大部分工具无需注册、下载或上传到服务器。服务涵盖：文件转换、加密解密、站长工具、代码开发、生活相关等。">
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;在线工具箱</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
</head>
<body>
<div id="loading">
<div id="loading_bg">
<div class="loader">正在加载</div>
</div>
</div>
<div class="bg-img"></div>
<div id="list" class="nav_content">
<!-- list_html信息栏（初始化）、工具表（插入）、后补内容 -->

10
js/contextmenu.js
Unescape View File

@ -1,16 +1,17 @@
window.addEventListener('contextmenu', RightClickMenu);
const rightMenu = document.querySelector('#rcb_menu');
const newTab = document.querySelector('#rcb_t6');
const incertBtn = document.querySelector('#rcb_t7');
function RightClickMenu(e) {
e.preventDefault();
rightMenu.style.display = 'block';
if (e.target.closest('a')) {
newTab.style.display = 'block';
// if (document.write(location.href)=='https://tools.pj568.eu.org/') {document.querySelector('#rcb_t7').style.display = 'block'}
document.querySelector('#rcb_t7').style.display = 'block';
// if (document.write(location.href) == 'https://tools.pj568.eu.org/') {incertBtn.style.display = 'block'}
incertBtn.style.display = 'block';
} else {
newTab.style.display = 'none';
document.querySelector('#rcb_t7').style.display = 'none';
incertBtn.style.display = 'none';
}
let x = e.clientX, y = e.clientY,
menuWidth = rightMenu.offsetWidth, menuHeight = rightMenu.offsetHeight,
@ -43,7 +44,8 @@ rightMenu.addEventListener('click', function (e) {
break;
case "rcb_t6":
if (e.target.closest('a')) {
var url = encodeURIComponent(e.target.closest('a').getAttribute('href'));
var a = e.target.closest('a');
var url = encodeURIComponent(a.getAttribute('href'));
window.open(url);
}
break;

23
js/loading.js
Unescape View File

@ -0,0 +1,23 @@
//Loading页面
document.onreadystatechange=function () {
if (document.readyState=="complete"){
loadingFade();
}
}
function loadingFade() {
var opacity=1;
const position = document.querySelector('#loading');
//var loadingPage=document.getElementById('loading');
var loadingBackground=document.getElementById('loading_bg');
var time=setInterval(function () {
if (opacity<=0){
clearInterval(time);
//loadingPage.remove();
// $('#loading').remove();
position.style.display = 'none';
}
loadingBackground.style.opacity=opacity;
opacity-=0.4;
},100);
}
Write Preview
Loading…
Cancel
Save