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

Add loader and animation (#180)

Browse Source
This commit is contained in:
Sam El-Husseini
2018-01-04 16:17:14 -08:00
committed by Peli de Halleux
parent 148657908c
commit 0db6987ee5
5 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,79 @@
/*******************************
Site Overrides
*******************************/
.ui.loader:before {
border: none;
border-radius: 0px;
box-shadow: none;
background: transparent @loaderBackImage no-repeat center center;
background-size: 100%;
}
.ui.loader:after {
border: none;
box-shadow: none;
border-radius: 0px;
margin: 40px auto;
background: transparent @loaderImage no-repeat center center;
background-size: 100%;
-webkit-animation: @loaderAnimation @loaderSpeed infinite linear;
animation: @loaderAnimation @loaderSpeed infinite linear;
}
.ui.loader.avatar:after {
border: none;
box-shadow: none;
border-radius: 0px;
margin: 40px auto;
background: transparent @avatarImage no-repeat center center;
background-size: 100%;
-webkit-animation: @loaderAnimation @loaderSpeed infinite linear;
animation: @loaderAnimation @loaderSpeed infinite linear;
}
@-webkit-keyframes loader-pxt-ev3 {
0% {
-webkit-transform: translateX(@loaderStartPoint);
transform: translateX(@loaderStartPoint);
}
20% {
-webkit-transform: translateX(-@loaderMiddlePoint);
transform: translateX(-@loaderMiddlePoint);
}
50% {
-webkit-transform: translateX(-@loaderEndPoint);
transform: translateX(-@loaderEndPoint);
}
75% {
-webkit-transform: translateX(-@loaderMiddlePoint);
transform: translateX(-@loaderMiddlePoint);
}
100% {
-webkit-transform: translateX(@loaderStartPoint);
transform: translateX(@loaderStartPoint);
}
}
@keyframes loader-pxt-ev3 {
0% {
-webkit-transform: translateX(@loaderStartPoint);
transform: translateX(@loaderStartPoint);
}
20% {
-webkit-transform: translateX(-@loaderMiddlePoint);
transform: translateX(-@loaderMiddlePoint);
}
50% {
-webkit-transform: translateX(-@loaderEndPoint);
transform: translateX(-@loaderEndPoint);
}
75% {
-webkit-transform: translateX(-@loaderMiddlePoint);
transform: translateX(-@loaderMiddlePoint);
}
100% {
-webkit-transform: translateX(@loaderStartPoint);
transform: translateX(@loaderStartPoint);
}
}

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

@ -1,3 +1,19 @@
/*******************************
User Variable Overrides
*******************************/
@loaderBackImageUrl: "../docs/static/loader_back.svg";
@loaderBackImage: data-uri(@loaderBackImageUrl);
@loaderImageUrl: "../docs/static/loader_front.svg";
@loaderImage: data-uri(@loaderImageUrl);
@loaderSpeed: 2s;
@loaderStartPoint: 0px;
@loaderMiddlePoint: 14px;
@loaderEndPoint: 28px;
@loaderAnimation: loader-pxt-ev3;
@large : 200px;