pxt-calliope/theme/site/elements/loader.overrides
Peli de Halleux 7a98b06424 Custom microbit loader (#334)
* Custom microbit loader

* updated animation

* use standardized name
2017-01-06 17:39:48 -08:00

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}
}