427 lines
14 KiB
SCSS
427 lines
14 KiB
SCSS
@include pc-layout {
|
|
#load-view {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
min-width: $min-width; min-height: $min-height;
|
|
|
|
/**
|
|
* frame
|
|
*/
|
|
.frame {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-color: $theme-pink;
|
|
|
|
/*** direction ***/
|
|
.direction {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
|
|
.left,
|
|
.right {
|
|
position: absolute;
|
|
left: calc(50% - 57.5px);
|
|
width: 115px; height: 35px;
|
|
|
|
div {
|
|
float: left;
|
|
width: 0; height: 0;
|
|
margin-top: 2.5px;
|
|
margin-right: 20px;
|
|
border-top: solid 15px transparent;
|
|
border-bottom: solid 15px transparent;
|
|
opacity: 0.1;
|
|
}
|
|
div:last-child { margin-right: 0; }
|
|
&::after { content: ""; display: block; clear: both; }
|
|
}
|
|
.bottom,
|
|
.top {
|
|
position: absolute;
|
|
top: calc(50% - 57.5px);
|
|
width: 35px; height: 115px;
|
|
|
|
div {
|
|
width: 0; height: 0;
|
|
margin-left: 2.5px;
|
|
margin-bottom: 20px;
|
|
border-left: solid 15px transparent;
|
|
border-right: solid 15px transparent;
|
|
opacity: 0.1;
|
|
}
|
|
div:last-child { margin-bottom: 0; }
|
|
&::after { content: ""; display: block; clear: both; }
|
|
}
|
|
|
|
/** left **/
|
|
.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; }
|
|
}
|
|
}
|
|
|
|
/*** square ***/
|
|
.square {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
|
|
div {
|
|
position: absolute;
|
|
width: 40px; height: 40px;
|
|
border: dashed 3px #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
}
|
|
div:nth-child(1) { top: 10px; left: 10px; }
|
|
div:nth-child(2) { top: 10px; right: 10px; }
|
|
div:nth-child(3) { bottom: 10px; left: 10px; }
|
|
div:nth-child(4) { bottom: 10px; right: 10px; }
|
|
}
|
|
|
|
/*** line ***/
|
|
.line {
|
|
position: absolute;
|
|
top: 47px; left: 47px;
|
|
width: calc(100% - 94px);
|
|
height: calc(100% - 94px);
|
|
|
|
div { position: absolute; box-sizing: border-box; }
|
|
div:nth-child(1),
|
|
div:nth-child(2) {
|
|
width: 100%; height: 1px; left: 0;
|
|
border-top: dashed 3px #fff;
|
|
}
|
|
div:nth-child(3),
|
|
div:nth-child(4) {
|
|
width: 1px; height: 100%;
|
|
border-left: dashed 3px #fff;
|
|
}
|
|
div:nth-child(1) { top: 0; }
|
|
div:nth-child(2) { bottom: 0; }
|
|
div:nth-child(3) { left: 0; }
|
|
div:nth-child(4) { right: 0; }
|
|
}
|
|
|
|
/*** rect ***/
|
|
.rect {
|
|
position: absolute;
|
|
top: 90px; left: 90px;
|
|
width: calc(100% - 180px); height: calc(100% - 180px);
|
|
z-index: 1;
|
|
|
|
/** bar **/
|
|
.bar {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
overflow: hidden;
|
|
|
|
div {
|
|
position: absolute;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-color: #fff;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
}
|
|
div:nth-child(1),
|
|
div:nth-child(3) { left: 0; width: 100%; height: 3px; }
|
|
div:nth-child(2),
|
|
div:nth-child(4) { top: 0; width: 3px; height: 100%; }
|
|
div:nth-child(1) {
|
|
top: 0;
|
|
&::after { transform: translateX(100%); }
|
|
}
|
|
div:nth-child(2) {
|
|
left: 0;
|
|
&::after { transform: translateY(-100%); }
|
|
}
|
|
div:nth-child(3) {
|
|
bottom: 0;
|
|
&::after { transform: translateX(-100%); }
|
|
}
|
|
div:nth-child(4) {
|
|
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 **/
|
|
.effect {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
|
|
div:nth-child(4) {
|
|
position: absolute;
|
|
top: -23.5px; right: -23.5px;
|
|
width: 50px; height: 50px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
animation: load-view__rect-effect4 3s linear 0s infinite;
|
|
}
|
|
|
|
div:nth-child(1),
|
|
div:nth-child(2),
|
|
div:nth-child(3) {
|
|
position: absolute;
|
|
width: 50px; height: 50px;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: solid 20px #fff;
|
|
opacity: 0;
|
|
}
|
|
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; }
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 60px; left: 60px;
|
|
width: calc(100% - 120px); height: calc(100% - 120px);
|
|
background-color: $theme-light-pink;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* display
|
|
*/
|
|
.display {
|
|
position: absolute;
|
|
top: 125px; left: 125px;
|
|
width: calc(100% - 250px); height: calc(100% - 250px);
|
|
|
|
/*** bg ***/
|
|
.bg {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
|
|
div {
|
|
position: absolute;
|
|
left: 0;
|
|
border-radius: 20px;
|
|
width: 100%; height: calc(50% - 1px);
|
|
opacity: 0.7;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 45px; height: 45px;
|
|
border-radius: 50%;
|
|
background-color: $theme-light-pink;
|
|
}
|
|
}
|
|
div:nth-child(1) {
|
|
top: 0; background-color: $theme-light-purple;
|
|
&::before { top: -7.5px; left: -7.5px; }
|
|
&::after { top: -7.5px; right: -7.5px; }
|
|
}
|
|
div:nth-child(2) {
|
|
bottom: 0; background-color: $theme-pink;
|
|
&::before { bottom: -7.5px; left: -7.5px; }
|
|
&::after { bottom: -7.5px; right: -7.5px; }
|
|
}
|
|
}
|
|
|
|
/*** blocks ***/
|
|
.blocks {
|
|
position: absolute;
|
|
top: calc(50% - 100px); left: calc(50% - 350px);
|
|
width: 700px; height: 200px;
|
|
|
|
.block {
|
|
position: absolute;
|
|
width: 110px; height: 110px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px #444;
|
|
transform: rotate(45deg);
|
|
opacity: 0;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 5px; left: 5px;
|
|
width: 100px; height: 100px;
|
|
box-sizing: border-box;
|
|
border: dashed 2px $theme-pink;
|
|
}
|
|
div {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
border-radius: 50%;
|
|
border: solid 40px $theme-light-pink;
|
|
box-sizing: border-box;
|
|
opacity: 0;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
transform: rotate(-45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.block:nth-child(1) {
|
|
top: 0; left: 0;
|
|
&::after { background-image: url(../images/load-view/charcters/char-1.png); }
|
|
}
|
|
.block:nth-child(2) {
|
|
bottom: 0; left: 100px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-2.png); }
|
|
}
|
|
.block:nth-child(3) {
|
|
top: 0; left: 200px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-3.png); }
|
|
}
|
|
.block:nth-child(4) {
|
|
bottom: 0; left: 300px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-4.png); }
|
|
}
|
|
.block:nth-child(5) {
|
|
top: 0; left: 400px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-5.png); }
|
|
}
|
|
.block:nth-child(6) {
|
|
bottom: 0; left: 500px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-6.png); }
|
|
}
|
|
.block:nth-child(7) {
|
|
top: 0; left: 600px;
|
|
&::after { background-image: url(../images/load-view/charcters/char-7.png); }
|
|
}
|
|
|
|
// animation -------------------------------------------------------------------
|
|
.block:nth-child(1) { animation: load-view__block1 0.5s ease 0.0s forwards; }
|
|
.block:nth-child(2) { animation: load-view__block2 0.5s ease 0.1s forwards; }
|
|
.block:nth-child(3) { animation: load-view__block1 0.5s ease 0.2s forwards; }
|
|
.block:nth-child(4) { animation: load-view__block2 0.5s ease 0.3s forwards; }
|
|
.block:nth-child(5) { animation: load-view__block1 0.5s ease 0.4s forwards; }
|
|
.block:nth-child(6) { animation: load-view__block2 0.5s ease 0.5s forwards; }
|
|
.block:nth-child(7) { animation: load-view__block1 0.5s ease 0.6s forwards; }
|
|
|
|
.block[data-state="true"]:nth-child(1) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char1 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(2) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char2 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(3) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char3 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(4) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char4 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(5) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char5 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(6) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char6 0.8s ease 0s forwards; }
|
|
}
|
|
.block[data-state="true"]:nth-child(7) {
|
|
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
|
|
&::after { animation: load-view__char7 0.8s ease 0s forwards; }
|
|
}
|
|
}
|
|
|
|
/*** progress-bar ***/
|
|
#progress-bar {
|
|
position: absolute;
|
|
bottom: 20px; left: 100px;
|
|
width: calc(100% - 200px); height: 30px;
|
|
border: solid 3px #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 20px;
|
|
padding: 5px;
|
|
|
|
div {
|
|
width: 0%; height: 100%;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
transition: all 0.5s ease 0s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#load-view[data-state="fin"] {
|
|
|
|
}
|
|
}
|