c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Custom microbit loader (#334)

Browse Source 
* Custom microbit loader

* updated animation

* use standardized name
This commit is contained in:
Peli de Halleux
2017-01-06 17:39:48 -08:00
committed by GitHub
parent 69c80d3aff
commit 7a98b06424
4 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
theme/site/elements/loader.overrides
View File

@ -1,3 +1,56 @@
/*******************************
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}
}

5
theme/site/elements/loader.variables
View File

@ -1,3 +1,8 @@
/*******************************
User Variable Overrides
*******************************/
@loaderSpeed: 2s;
@loaderAngle: 5deg;
@large : 200px;