7a98b06424
* Custom microbit loader * updated animation * use standardized name
56 lines
1.9 KiB
Plaintext
Executable File
56 lines
1.9 KiB
Plaintext
Executable File
/*******************************
|
|
Site Overrides
|
|
*******************************/
|
|
|
|
.ui.loader:before {
|
|
border: none;
|
|
border-radius: 0px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ui.loader:after {
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0px;
|
|
margin: 40px auto;
|
|
background: transparent data-uri("static/loader.svg") no-repeat center center;
|
|
background-size: 100%;
|
|
-webkit-animation: loader-pxt @loaderSpeed infinite ease-in-out;
|
|
animation: loader-pxt @loaderSpeed infinite ease-in-out;
|
|
}
|
|
|
|
@-webkit-keyframes loader-pxt {
|
|
0% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
opacity: 0}
|
|
15% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(-@loaderAngle);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(-@loaderAngle); }
|
|
50% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(@loaderAngle);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(@loaderAngle);
|
|
opacity: 1}
|
|
100% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
opacity: 0}
|
|
}
|
|
|
|
@keyframes loader-pxt {
|
|
0% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
opacity: 0}
|
|
15% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(-10deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(-10deg); }
|
|
50% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(10deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(10deg);
|
|
opacity: 1}
|
|
100% {
|
|
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
|
|
opacity: 0}
|
|
} |