Skip to content
This repository has been archived by the owner on Sep 3, 2021. It is now read-only.

Commit

Permalink
完成 loading 动画
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShadowySpirits
ShadowySpirits committed Feb 17, 2019
1 parent c8a6ada commit 7d773a2
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 199 deletions.
1 change: 1 addition & 0 deletions Action.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ public function printCollecion()
</a>
";
}
echo '<div style="clear:both"></div>';
}

private static function curl_get_contents($_url)
Expand Down
37 changes: 10 additions & 27 deletions Plugin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,34 +70,17 @@ public static function replace($content, $widget, $lastResult)
public static function output()
{
$cssPath = Helper::options()->pluginUrl . '/BangumiList/loading.css';
return '<link rel="stylesheet" type="text/css" href="' . $cssPath . '" />' . '<div id="bangumiList">
<div class="bangumi_loading">
<div class="loading-anim">
<div class="border out"></div>
<div class="border in"></div>
<div class="border mid"></div>
<div class="circle">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
return '<link rel="stylesheet" type="text/css" href="' . $cssPath . '" />' .
'<div id="bangumiList" class="bangumiList">
<div>
<div class="bangumi_loading">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
<div class="bangumi_loading_text">追番列表加载中...</div>
</div>
<div class="bangumi_loading_text">追番列表加载中...</div>
</div>
</div>
</div>
<div style="clear:both"></div>' . "
</div>' . "
<script>
jQuery.ajax({
type: 'GET',
Expand Down
219 changes: 47 additions & 172 deletions loading.css
View file
Original file line number Diff line number Diff line change
@@ -1,198 +1,73 @@
@charset "utf-8";

.bangumi_loading{
padding:100px 0;
}
.bangumi_loading_text{
text-align:center;
padding:10px 0;
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0);
transition: background-color .2s ease-out;
}

.loading-anim {
position: relative;
width: 200px;
height: 200px;
margin: auto;
perspective: 800px;
transform-style: preserve-3d;
transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
opacity: 0;
transition: all .2s ease-out;
}
.loading-anim .circle {
width: 100%;
height: 100%;
animation: spin 5s linear infinite;
}
.loading-anim .border {
position: absolute;
.bangumi_loading {
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #e34981;
}
.loading-anim .out {
top: 15%;
left: 15%;
width: 70%;
height: 70%;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 2s linear reverse infinite;
}
.loading-anim .in {
top: 18%;
left: 18%;
width: 64%;
height: 64%;
border-top-color: transparent;
border-bottom-color: transparent;
animation: spin 2s linear infinite;
}
.loading-anim .mid {
top: 40%;
left: 40%;
width: 20%;
height: 20%;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 1s linear infinite;
}

.loading-anim {
transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
opacity: 1;
}

.loading-overlay {
background: rgba(255, 255, 255, 0.5);
perspective: 800px;
margin: 20px auto;
}

.dot {
.inner {
position: absolute;
display: block;
width: 20px;
height: 20px;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #e34981;
animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

.dot:nth-child(1) {
top: 90px;
left: 180px;
animation-delay: 0s;
}

.dot:nth-child(2) {
top: 135px;
left: 168px;
animation-delay: 0.41667s;
}

.dot:nth-child(3) {
top: 168px;
left: 135px;
animation-delay: 0.83333s;
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 5px solid #FF73B3;
}

.dot:nth-child(4) {
top: 180px;
left: 90px;
animation-delay: 1.25s;
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 5px solid #FF73B3;
}

.dot:nth-child(5) {
top: 168px;
left: 45px;
animation-delay: 1.66667s;
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 5px solid #FF73B3;
}

.dot:nth-child(6) {
top: 135px;
left: 12px;
animation-delay: 2.08333s;
}

.dot:nth-child(7) {
top: 90px;
left: 0px;
animation-delay: 2.5s;
}

.dot:nth-child(8) {
top: 45px;
left: 12px;
animation-delay: 2.91667s;
}

.dot:nth-child(9) {
top: 12px;
left: 45px;
animation-delay: 3.33333s;
}

.dot:nth-child(10) {
top: 0px;
left: 90px;
animation-delay: 3.75s;
}

.dot:nth-child(11) {
top: 12px;
left: 135px;
animation-delay: 4.16667s;
}

.dot:nth-child(12) {
top: 45px;
left: 168px;
animation-delay: 4.58333s;
}

@keyframes spin {
from {
transform: rotate(0deg);
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
to {
transform: rotate(360deg);
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes jitter {

@keyframes rotate-two {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(0.7, 0.7);
}
50% {
transform: scale(1, 1);
}
75% {
transform: scale(1.3, 1.3);
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: scale(1, 1);
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes fade-in-out {

@keyframes rotate-three {
0% {
opacity: 0.8;
}
25% {
opacity: 0.2;
}
75% {
opacity: 1;
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
opacity: 0.8;
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}

.bangumiList{
margin: 20px 0;
}

.bangumi_loading_text{
text-align:center;
font-size: 16px;
font-weight: 600;
}

0 comments on commit 7d773a2

Please sign in to comment.