From ade257d78c695787f05d0554ac6feae3a9571b45 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Tue, 20 Feb 2018 16:29:55 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E3=83=AD=E3=83=BC=E3=83=89=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AE=E3=83=95=E3=83=AC=E3=83=BC=E3=83=A0=E3=81=AB?=
 =?UTF-8?q?=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/pc/load-view.scss | 149 +++++++++++++++++++++++++++
 src/scss/modules/pc/load-view.scss   |  32 ++++++
 2 files changed, 181 insertions(+)
 create mode 100644 src/scss/keyframes/pc/load-view.scss

diff --git a/src/scss/keyframes/pc/load-view.scss b/src/scss/keyframes/pc/load-view.scss
new file mode 100644
index 0000000..b2cc961
--- /dev/null
+++ b/src/scss/keyframes/pc/load-view.scss
@@ -0,0 +1,149 @@
+/*** dire-left ***/
+@keyframes load-view__dire-left-1 {
+  0%   { opacity: 0.1; }
+  5%   { opacity: 0.1; }
+  15%  { opacity: 1; }
+  25%  { opacity: 1; }
+  35%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-left-2 {
+  0%   { opacity: 0.1; }
+  15%  { opacity: 0.1; }
+  25%  { opacity: 1; }
+  35%  { opacity: 1; }
+  45%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-left-3 {
+  0%   { opacity: 0.1; }
+  25%  { opacity: 0.1; }
+  35%  { opacity: 1; }
+  45%  { opacity: 1; }
+  55%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+
+/*** dire-bottom ***/
+@keyframes load-view__dire-bottom-1 {
+  0%   { opacity: 0.1; }
+  25%  { opacity: 0.1; }
+  35%  { opacity: 1; }
+  45%  { opacity: 1; }
+  55%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-bottom-2 {
+  0%   { opacity: 0.1; }
+  35%  { opacity: 0.1; }
+  45%  { opacity: 1; }
+  55%  { opacity: 1; }
+  65%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-bottom-3 {
+  0%   { opacity: 0.1; }
+  45%  { opacity: 0.1; }
+  55%  { opacity: 1; }
+  65%  { opacity: 1; }
+  75%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+
+/*** dire-right ***/
+@keyframes load-view__dire-right-1 {
+  0%   { opacity: 0.1; }
+  45%  { opacity: 0.1; }
+  55%  { opacity: 1; }
+  65%  { opacity: 1; }
+  75%  { opacity: 0.1; }
+}
+@keyframes load-view__dire-right-2 {
+  0%   { opacity: 0.1; }
+  55%  { opacity: 0.1; }
+  65%  { opacity: 1; }
+  75%  { opacity: 1; }
+  85%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-right-3 {
+  0%   { opacity: 0.1; }
+  65%  { opacity: 0.1; }
+  75%  { opacity: 1; }
+  85%  { opacity: 1; }
+  95%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+
+/*** dire-top ***/
+@keyframes load-view__dire-top-1 {
+  0%   { opacity: 0.1; }
+  60%  { opacity: 0.1; }
+  70%  { opacity: 1; }
+  80%  { opacity: 1; }
+  90%  { opacity: 0.1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-top-2 {
+  0%   { opacity: 0.1; }
+  70%  { opacity: 0.1; }
+  80%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { opacity: 0.1; }
+}
+@keyframes load-view__dire-top-3 {
+  0%   { opacity: 0.1; }
+  80%  { opacity: 0.1; }
+  90%  { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+/*** rect-bar ***/
+@keyframes load-view__rect-bar1 {
+  0%   { transform: translateX(100%); }
+  40%  { transform: translateX(-100%); }
+  100% { transform: translateX(-100%); }
+}
+@keyframes load-view__rect-bar2 {
+  0%   { transform: translateY(-100%); }
+  20%  { transform: translateY(-100%); }
+  60%  { transform: translateY(100%); }
+  100% { transform: translateY(100%); }
+}
+@keyframes load-view__rect-bar3 {
+  0%   { transform: translateX(-100%); }
+  40%  { transform: translateX(-100%); }
+  80%  { transform: translateX(100%); }
+  100% { transform: translateX(100%); }
+}
+@keyframes load-view__rect-bar4 {
+  0%   { transform: translateY(100%); }
+  60%  { transform: translateY(100%); }
+  100% { transform: translateY(-100%); }
+}
+
+/*** rect-effect ***/
+@keyframes load-view__rect-effect1 {
+  0%   { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  20%  { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  32%  { opacity: 1; transform: scale(1.8); border-width: 0px; }
+  100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
+}
+@keyframes load-view__rect-effect2 {
+  0%   { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  40%  { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  52%  { opacity: 1; transform: scale(1.8); border-width: 0px; }
+  100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
+}
+@keyframes load-view__rect-effect3 {
+  0%   { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  60%  { opacity: 0; transform: scale(0.5); border-width: 20px; }
+  72%  { opacity: 1; transform: scale(1.8); border-width: 0px; }
+  100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
+}
+@keyframes load-view__rect-effect4 {
+  0%   { transform: scale(1); }
+  20%  { transform: scale(0); }
+  80%  { transform: scale(0); }
+  100% { transform: scale(1); }
+}
diff --git a/src/scss/modules/pc/load-view.scss b/src/scss/modules/pc/load-view.scss
index 2878d08..c636ec9 100644
--- a/src/scss/modules/pc/load-view.scss
+++ b/src/scss/modules/pc/load-view.scss
@@ -60,23 +60,35 @@
         .left {
           top: 6px;
           div { border-right: solid 25px #fff; }
+          div:nth-child(1) { animation: load-view__dire-left-3 3s linear 0s infinite; }
+          div:nth-child(2) { animation: load-view__dire-left-2 3s linear 0s infinite; }
+          div:nth-child(3) { animation: load-view__dire-left-1 3s linear 0s infinite; }
         }
         
         /** right **/
         .right {
           bottom: 6px;
           div { border-left: solid 25px #fff; }
+          div:nth-child(1) { animation: load-view__dire-right-1 3s linear 0s infinite; }
+          div:nth-child(2) { animation: load-view__dire-right-2 3s linear 0s infinite; }
+          div:nth-child(3) { animation: load-view__dire-right-3 3s linear 0s infinite; }
         }
 
         /** bottom **/
         .bottom {
           left: 6px;
           div { border-top: solid 25px #fff; }
+          div:nth-child(1) { animation: load-view__dire-bottom-1 3s linear 0s infinite; }
+          div:nth-child(2) { animation: load-view__dire-bottom-2 3s linear 0s infinite; }
+          div:nth-child(3) { animation: load-view__dire-bottom-3 3s linear 0s infinite; }
         }
         /** top **/
         .top {
           right: 6px;
           div { border-bottom: solid 25px #fff; }
+          div:nth-child(1) { animation: load-view__dire-top-3 3s linear 0s infinite; }
+          div:nth-child(2) { animation: load-view__dire-top-2 3s linear 0s infinite; }
+          div:nth-child(3) { animation: load-view__dire-top-1 3s linear 0s infinite; }
         }
       }
 
@@ -169,6 +181,20 @@
             right: 0;
             &::after { transform: translateY(100%); }
           }
+          
+          // animation ----------------------------------------------------------------------
+          div:nth-child(1) { &::after {
+            animation: load-view__rect-bar1 3s linear 0s infinite;
+          }}
+          div:nth-child(2) { &::after {
+            animation: load-view__rect-bar2 3s linear 0s infinite;
+          }}
+          div:nth-child(3) { &::after {
+            animation: load-view__rect-bar3 3s linear 0s infinite;
+          }}
+          div:nth-child(4) { &::after {
+            animation: load-view__rect-bar4 3s linear 0s infinite;
+          }}
         }
 
         /** effect **/
@@ -183,6 +209,7 @@
             width: 50px; height: 50px;
             background-color: #fff;
             border-radius: 50%;
+            animation: load-view__rect-effect4 3s linear 0s infinite;
           }
 
           div:nth-child(1),
@@ -198,6 +225,11 @@
           div:nth-child(1) { top: -23.5px; left: -23.5px; }
           div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
           div:nth-child(3) { bottom: -23.5px; right: -23.5px; }
+
+          // animation --------------------------------------------------------------------
+          div:nth-child(1) { animation: load-view__rect-effect1 3s linear 0s infinite; }
+          div:nth-child(2) { animation: load-view__rect-effect2 3s linear 0s infinite; }
+          div:nth-child(3) { animation: load-view__rect-effect3 3s linear 0s infinite; }
         }
       }