diff --git a/scripts/filters/lazyload-handle.js b/scripts/filters/lazyload-handle.js
index 2dd4af2..83bdfb3 100644
--- a/scripts/filters/lazyload-handle.js
+++ b/scripts/filters/lazyload-handle.js
@@ -1,19 +1,19 @@
+/* global hexo */
+
 'use strict'
+
 hexo.extend.filter.register(
   'after_post_render',
   function (data) {
     const theme = hexo.theme.config
     if (!theme.lazyload || !theme.lazyload.enable) return
     data.content = data.content.replace(
-      // Match 'img' tags width the src attribute.
+      // Match 'img' tags the src attribute.
       /<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
       function (match, attrBegin, src, attrEnd) {
-        // Exit if the src doesn't exists.
         if (!src) return match
-
         return `<img ${attrBegin}
                      lazyload
-                     src="/images/loading.svg"
                      data-src="${src}"
                      ${attrEnd}
                 >`
diff --git a/source/css/common/animated.styl b/source/css/common/animated.styl
index 12ab458..bda26a0 100644
--- a/source/css/common/animated.styl
+++ b/source/css/common/animated.styl
@@ -77,6 +77,12 @@ transition-t(property, delay, duration, function) {
   }
 }
 
+@keyframes img-loading-animation {
+  to {
+    transform rotate(1turn)
+  }
+}
+
 .title-hover-animation {
   position relative
   display inline-block
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index 51cdd2a..33b6149 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -119,10 +119,44 @@ a {
 // ======================================================================
 img {
   &[lazyload] {
-    margin 1.4rem auto !important
-    padding 0.8rem
+    position relative
+    box-sizing border-box
+    width 8rem
+    height 8rem
+    box-shadow none !important
     cursor not-allowed
     pointer-events none
+
+    &::before {
+      position absolute
+      top 0
+      left 0
+      display block
+      width 100%
+      height 100%
+      background var(--background-color)
+      content ''
+      transition-t("background", "0", "0.2", "ease")
+    }
+
+    &::after {
+      position absolute
+      top 0
+      right 0
+      bottom 0
+      left 0
+      display block
+      width 2rem
+      height 2rem
+      margin auto
+      border 2px solid var(--fourth-text-color)
+      border-top-color var(--selection-color)
+      border-left-color var(--selection-color)
+      border-radius 50%
+      animation img-loading-animation 750ms infinite linear
+      content ''
+      transition-t("border", "0", "0.2", "ease")
+    }
   }
 }
 
@@ -242,8 +276,8 @@ button {
     justify-content center
     box-sizing border-box
     min-height 6rem
-    padding 0.2rem
     background var(--fourth-text-color)
+    border 0.2rem solid var(--default-text-color)
     border-radius 0.3rem
     transform translateX(-50%) translateY(-100%)
     transition-t("display", "0", "0.2", "ease")
diff --git a/source/images/loading.svg b/source/images/loading.svg
deleted file mode 100644
index 06bc6d5..0000000
--- a/source/images/loading.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<g transform="translate(80,50)">
-<g transform="rotate(0)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="1">
-  <animateTransform attributeName="transform" type="scale" begin="-1.1217948717948718s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-1.1217948717948718s"></animate>
-</circle>
-</g>
-</g><g transform="translate(71.21320343559643,71.21320343559643)">
-<g transform="rotate(45)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.875">
-  <animateTransform attributeName="transform" type="scale" begin="-0.9615384615384615s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.9615384615384615s"></animate>
-</circle>
-</g>
-</g><g transform="translate(50,80)">
-<g transform="rotate(90)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.75">
-  <animateTransform attributeName="transform" type="scale" begin="-0.8012820512820512s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.8012820512820512s"></animate>
-</circle>
-</g>
-</g><g transform="translate(28.786796564403577,71.21320343559643)">
-<g transform="rotate(135)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.625">
-  <animateTransform attributeName="transform" type="scale" begin="-0.641025641025641s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.641025641025641s"></animate>
-</circle>
-</g>
-</g><g transform="translate(20,50.00000000000001)">
-<g transform="rotate(180)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.5">
-  <animateTransform attributeName="transform" type="scale" begin="-0.4807692307692307s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.4807692307692307s"></animate>
-</circle>
-</g>
-</g><g transform="translate(28.78679656440357,28.786796564403577)">
-<g transform="rotate(225)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.375">
-  <animateTransform attributeName="transform" type="scale" begin="-0.3205128205128205s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.3205128205128205s"></animate>
-</circle>
-</g>
-</g><g transform="translate(49.99999999999999,20)">
-<g transform="rotate(270)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.25">
-  <animateTransform attributeName="transform" type="scale" begin="-0.16025641025641024s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.16025641025641024s"></animate>
-</circle>
-</g>
-</g><g transform="translate(71.21320343559643,28.78679656440357)">
-<g transform="rotate(315)">
-<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.125">
-  <animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
-  <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
-</circle>
-</g>
-</g>
-<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/source/js/utils.js b/source/js/utils.js
index 7647348..7d6cd49 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -374,8 +374,9 @@ KEEP.initUtils = () => {
           const { src } = img.dataset
           temp.src = src
           temp.onload = () => {
-            imgLoaded = true
             img.src = src
+            img.removeAttribute('lazyload')
+            imgLoaded = true
           }
         }
 
@@ -384,7 +385,7 @@ KEEP.initUtils = () => {
           if (imgUrl) {
             const imgDomClass = `tooltip-img-${name}`
             const nameIdx = `${name}_${idx}`
-            const imgDom = `<img class="${imgDomClass}" src="./images/loading.svg" data-src="${imgUrl}" alt="${name}">`
+            const imgDom = `<img class="${imgDomClass}" lazyload data-src="${imgUrl}" alt="${name}">`
             const imgTooltipBox = `<div class="tooltip-img-box">${imgDom}</div>`
 
             imgsSet[nameIdx] = {