Line 810: | Line 810: | ||
− | . | + | .spinner { |
− | + | position: absolute; | |
− | + | width: 128px; | |
− | + | height: 128px; | |
− | + | top: calc(50% - 64px); | |
+ | left: calc(50% - 64px); | ||
+ | -webkit-transform: perspective(206px) rotateX(45deg); | ||
+ | transform: perspective(206px) rotateX(45deg); | ||
} | } | ||
− | . | + | .outer { |
− | + | box-sizing: border-box; | |
− | + | -webkit-animation: spin 3s linear infinite; | |
− | + | animation: spin 3s linear infinite; | |
− | + | height: 100%; | |
} | } | ||
− | . | + | .inner { |
− | + | position: absolute; | |
− | + | border-radius: 50%; | |
− | + | width: 64px; | |
− | + | height: 64px; | |
+ | -webkit-animation: spin 1.8s ease-in-out infinite; | ||
+ | animation: spin 1.8s ease-in-out infinite; | ||
} | } | ||
− | + | .inner.tl { | |
− | . | + | top: 0; |
− | + | left: 0; | |
− | + | border-top: 2px solid #531430; | |
− | + | border-left: 4px solid #531430; | |
− | + | ||
} | } | ||
− | + | .inner.tr { | |
− | . | + | top: 0; |
− | + | right: 0; | |
− | + | border-top: 2px solid #e04960; | |
− | + | border-right: 4px solid #e04960; | |
− | + | ||
} | } | ||
− | + | .inner.br { | |
− | . | + | bottom: 0; |
− | + | right: 0; | |
− | + | border-bottom: 2px solid #531430; | |
− | + | border-right: 4px solid #531430; | |
− | + | ||
} | } | ||
− | + | .inner.bl { | |
− | . | + | bottom: 0; |
− | + | left: 0; | |
− | + | border-bottom: 2px solid #e04960; | |
− | + | border-left: 4px solid #e04960; | |
− | + | ||
} | } | ||
− | + | @-webkit-keyframes spin { | |
− | + | 0% { | |
− | + | -webkit-transform: rotate(0deg); | |
− | + | transform: rotate(0deg); | |
− | + | } | |
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
} | } | ||
− | + | @keyframes spin { | |
− | + | 0% { | |
− | + | -webkit-transform: rotate(0deg); | |
− | + | transform: rotate(0deg); | |
− | + | } | |
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/***************************************************** RESPONSIVE STYLING ****************************************************/ | /***************************************************** RESPONSIVE STYLING ****************************************************/ | ||
Line 1,025: | Line 961: | ||
<div class="overlay"><div> | <div class="overlay"><div> | ||
LOADING... | LOADING... | ||
− | <div class=" | + | <div class="spinner"> |
− | <div class=" | + | <div class="outer"> |
− | + | <div class="inner tl"></div> | |
− | + | <div class="inner tr"></div> | |
− | + | <div class="inner br"></div> | |
− | + | <div class="inner bl"></div> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
Revision as of 22:04, 27 July 2017