diff --git a/public/images/load-view/wait/1.png b/public/images/load-view/wait/1.png new file mode 100644 index 0000000..1513f04 Binary files /dev/null and b/public/images/load-view/wait/1.png differ diff --git a/public/images/load-view/wait/2.png b/public/images/load-view/wait/2.png new file mode 100644 index 0000000..2e37696 Binary files /dev/null and b/public/images/load-view/wait/2.png differ diff --git a/public/images/load-view/wait/3.png b/public/images/load-view/wait/3.png new file mode 100644 index 0000000..a758f3d Binary files /dev/null and b/public/images/load-view/wait/3.png differ diff --git a/public/images/load-view/wait/4.png b/public/images/load-view/wait/4.png new file mode 100644 index 0000000..69e254b Binary files /dev/null and b/public/images/load-view/wait/4.png differ diff --git a/src/scss/modules/_common.scss b/src/scss/keyframes/_common.scss similarity index 58% rename from src/scss/modules/_common.scss rename to src/scss/keyframes/_common.scss index 3242286..b898972 100644 --- a/src/scss/modules/_common.scss +++ b/src/scss/keyframes/_common.scss @@ -6,3 +6,7 @@ from { opacity: 1; } to { opacity: 0; } } +@keyframes rotate360 { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/src/scss/keyframes/pc/_load-view.scss b/src/scss/keyframes/pc/_load-view.scss new file mode 100644 index 0000000..40648b0 --- /dev/null +++ b/src/scss/keyframes/pc/_load-view.scss @@ -0,0 +1,8 @@ +@keyframes load-view__show-wait-icon { + from { transform: translateX(-150px) scale(0.8); } + to { transform: translateX(0px) scale(1.3); } +} +@keyframes load-view__scale-wait-icon { + from { transform: scale(5) rotate(0deg); } + to { transform: scale(1) rotate(360deg); } +} diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss index 4a8ed66..2b7c201 100644 --- a/src/scss/modules/pc/_load-view.scss +++ b/src/scss/modules/pc/_load-view.scss @@ -68,11 +68,11 @@ */ .load-view__body { position: absolute; - top: 80px; left: 80px; - width: calc(100% - 160px); - height: calc(100% - 160px); + top: 0px; left: 0px; + width: 100%; height: 100%; } + /*** bg ***/ .load-view__body__bg { position: absolute; top: 0; left: 0; @@ -82,12 +82,139 @@ &::after { content: ""; display: block; position: absolute; - width: calc(100% - 20px); - height: calc(100% - 20px); + width: calc(100% - 180px); + height: calc(100% - 180px); border-radius: 5px; background-color: rgba(255,255,255,0.2); } - &::before { top: 0; left: 0; } - &::after { bottom: 0; right: 0; } + &::before { top: 80px; left: 80px; } + &::after { bottom: 80px; right: 80px; } + } + + /*** panel ***/ + .load-view__body__panel { + position: absolute; + top: 0; left: calc(50% - 450px); + width: 900px; height: 100%; + } + + /*** panel__icon ***/ + .load-view__body__panel__icon { + position: absolute; + top: calc(50% - 60px); + width: 120px; height: 120px; + opacity: 0; + + .box { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + &::after { + content: ""; display: block; + position: absolute; + top: 8px; left: 8px; + width: calc(100% - 16px); height: calc(100% - 16px); + box-sizing: border-box; + border: solid 2px transparent; + } + + .frame { + position: absolute; + width: 40%; height: 40%; + + &::before, + &::after { content: ""; display: block; position: absolute; } + &::before { width: 100%; height: 8px; } + &::after { width: 8px; height: 100%; } + } + .frame:nth-child(1) { + top: 0; right: 0; + &::before, &::after { top: 0; right: 0; } + } + .frame:nth-child(2) { + bottom: 0; left: 0; + &::before, &::after { bottom: 0; left: 0; } + } + } + + .icon { + position: absolute; + top: 25px; left: 25px; + width: calc(100% - 50px); height: calc(100% - 50px); + background-size: 150%; + background-position: center; + } + } + .load-view__body__panel__icon_type_1 { + left: 84px; + .box { + &::after { border-color: $theme-pink; } + .frame { + &::before, + &::after { background-color: $theme-pink; } + } + } + .icon { background-image: url(../images/load-view/wait/1.png); } + } + .load-view__body__panel__icon_type_2 { + left: 288px; + .box { + &::after { border-color: $theme-light-purple; } + .frame { + &::before, + &::after { background-color: $theme-light-purple; } + } + } + .icon { background-image: url(../images/load-view/wait/2.png); } + } + .load-view__body__panel__icon_type_3 { + right: 288px; + .box { + &::after { border-color: $theme-light-pink; } + .frame { + &::before, + &::after { background-color: $theme-light-pink; } + } + } + .icon { background-image: url(../images/load-view/wait/3.png); } + } + .load-view__body__panel__icon_type_4 { + right: 84px; + .box { + &::after { border-color: $theme-purple; } + .frame { + &::before, + &::after { background-color: $theme-purple; } + } + } + .icon { background-image: url(../images/load-view/wait/4.png); } + } + + /* animation *********************************************************************************/ + .load-view__body__panel__icon { .box { animation: rotate360 3s linear 0s infinite; } } + .load-view__body__panel__icon_type_1 { + animation: + fadein 0.8s ease 0s forwards, + load-view__show-wait-icon 0.8s ease 0s forwards; + .icon { animation: load-view__scale-wait-icon 1s ease 0s forwards; } + } + .load-view__body__panel__icon_type_2 { + animation: + fadein 0.8s ease 0.3s forwards, + load-view__show-wait-icon 0.8s ease 0.3s forwards; + .icon { animation: load-view__scale-wait-icon 1s ease 0.3s forwards; } + } + .load-view__body__panel__icon_type_3 { + animation: + fadein 0.8s ease 0.6s forwards, + load-view__show-wait-icon 0.8s ease 0.6s forwards; + .icon { animation: load-view__scale-wait-icon 1s ease 0.6s forwards; } + } + .load-view__body__panel__icon_type_4 { + animation: + fadein 0.8s ease 0.9s forwards, + load-view__show-wait-icon 0.8s ease 0.9s forwards; + .icon { animation: load-view__scale-wait-icon 1s ease 0.9s forwards; } } }