JiXieShi/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP svg

Browse Source
This commit is contained in:
JiXieShi
2024-05-03 22:14:21 +08:00
parent ce45736f28
commit 080c41d458
6 changed files with 121 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
themes/blog/public/img/loading.svg Normal file
View File

@@ -0,0 +1,47 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<!-- Todo: add easing -->
<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle cx="5" cy="50" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
values="50;5;50;50"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
begin="0s" dur="2.2s"
values="5;27;49;5"
calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
from="5" to="5"
values="5;50;50;5"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
begin="0s" dur="2.2s"
from="27" to="27"
values="27;49;5;27"
calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="49" cy="50" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
values="50;50;5;50"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
from="49" to="49"
begin="0s" dur="2.2s"
values="49;5;27;49"
calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
themes/blog/talk.html
View File

@@ -45,6 +45,7 @@
}
#talk .loading {
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
@@ -52,7 +53,8 @@
}
#talk .loading img {
width: 200px;
width: 50px;
background-color:var(--primary,#673ab7);
}
.talk_item {
@@ -193,7 +195,7 @@
</style>
<div id="talk">
<div class='loading'><img src="/img/loading.svg" alt="加载中..."></div>
<div class='loading'><img src="/public/img/loading.svg" alt="加载中..."></div>
</div>
<div class="limit">- 只展示最近30条说说 -</div>