feat: add api request loading animation. v2.1.0 fd6ad59d5c

This commit is contained in:
jaywcjlove
2022-09-03 09:15:29 +00:00
parent 4bbd8ffb21
commit 770fa3f4ab
8 changed files with 38 additions and 8 deletions

View File

@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.54c18d87.css",
"main.js": "/static/js/main.f8ccca30.js",
"main.js": "/static/js/main.f5cd322b.js",
"static/js/6166.992ecfd5.chunk.js": "/static/js/6166.992ecfd5.chunk.js",
"static/js/4974.51dd83df.chunk.js": "/static/js/4974.51dd83df.chunk.js",
"static/js/8050.baf536a4.chunk.js": "/static/js/8050.baf536a4.chunk.js",
@@ -110,12 +110,13 @@
"static/js/9057.e78df713.chunk.js": "/static/js/9057.e78df713.chunk.js",
"refractor-prismjs-vendor.js": "/static/js/refractor-prismjs-vendor.c07a79a1.js",
"react-vendor.js": "/static/js/react-vendor.3642ac4d.js",
"static/media/tail-spin.svg": "/static/media/tail-spin.f708af82b1c2e4bdd8393694d7a0ab6b.svg",
"static/media/logo.svg": "/static/media/logo.6a1d4715ae6fb70336779d6df5d3783b.svg",
"index.html": "/index.html",
"static/media/github.svg": "/static/media/github.6988a55f42f5097e5bd19ed9ae72ccde.svg",
"static/media/color.svg": "/static/media/color.3cdb61387d75158307fc6d9ed1ab3e74.svg",
"main.54c18d87.css.map": "/static/css/main.54c18d87.css.map",
"main.f8ccca30.js.map": "/static/js/main.f8ccca30.js.map",
"main.f5cd322b.js.map": "/static/js/main.f5cd322b.js.map",
"6166.992ecfd5.chunk.js.map": "/static/js/6166.992ecfd5.chunk.js.map",
"4974.51dd83df.chunk.js.map": "/static/js/4974.51dd83df.chunk.js.map",
"8050.baf536a4.chunk.js.map": "/static/js/8050.baf536a4.chunk.js.map",
@@ -229,6 +230,6 @@
"static/js/refractor-prismjs-vendor.c07a79a1.js",
"static/js/react-vendor.3642ac4d.js",
"static/css/main.54c18d87.css",
"static/js/main.f8ccca30.js"
"static/js/main.f5cd322b.js"
]
}

View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport"><meta name="theme-color" content="#000000"/><title>微信公众号 Markdown 编辑器</title><meta name="keywords" content="react,simple,monorepo,template,component,project,package,development"/><meta name="description" content="Simple React package development project example template."/><link rel="icon" href="favicon.ico"/><script defer="defer" src="./static/js/refractor-prismjs-vendor.c07a79a1.js"></script><script defer="defer" src="./static/js/react-vendor.3642ac4d.js"></script><script defer="defer" src="./static/js/main.f8ccca30.js"></script><link href="./static/css/main.54c18d87.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport"><meta name="theme-color" content="#000000"/><title>微信公众号 Markdown 编辑器</title><meta name="keywords" content="react,simple,monorepo,template,component,project,package,development"/><meta name="description" content="Simple React package development project example template."/><link rel="icon" href="favicon.ico"/><script defer="defer" src="./static/js/refractor-prismjs-vendor.c07a79a1.js"></script><script defer="defer" src="./static/js/react-vendor.3642ac4d.js"></script><script defer="defer" src="./static/js/main.f5cd322b.js"></script><link href="./static/css/main.54c18d87.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 105 105" fill="currentColor">
<circle cx="12.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
<animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="52.5" r="12.5">
<animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="52.5" r="12.5">
<animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="12.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB