Custom microbit loader (#334)
* Custom microbit loader * updated animation * use standardized name
This commit is contained in:
Peli de Halleux
GitHub
parent
69c80d3aff
commit
7a98b06424
61
docs/static/loader.svg
vendored
Normal file
61
docs/static/loader.svg
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
role="img"
|
||||
aria-labelledby="title desc"
|
||||
xml:space="preserve"
|
||||
enable-background="new 0 0 280 32.755"
|
||||
height="52.672001"
|
||||
width="52.672001"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="logo.square.white.svg"><sodipodi:namedview
|
||||
pagecolor="#ff00ff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1536"
|
||||
inkscape:window-height="801"
|
||||
id="namedview14"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.0836233"
|
||||
inkscape:cx="83.390493"
|
||||
inkscape:cy="16.071144"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" /><rect
|
||||
id="backgroundrect"
|
||||
width="195.47368"
|
||||
height="34.210526"
|
||||
x="0"
|
||||
y="18.461473"
|
||||
class=""
|
||||
style="fill:none;stroke:none" /><title
|
||||
id="title"
|
||||
lang="en-GB">BBC micro:bit</title><desc
|
||||
id="desc"
|
||||
lang="en-GB">BBC micro:bit logo</desc><metadata
|
||||
id="metadata37"><rdf:rdf><cc:work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:work></rdf:rdf><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>BBC micro:bit</dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs35" /><path
|
||||
inkscape:connector-curvature="0"
|
||||
class=""
|
||||
d="m 37.363,29.377 c -1.677,0 -3.035,-1.364 -3.035,-3.042 0,-1.678 1.357,-3.038 3.035,-3.038 1.684,0 3.039,1.36 3.039,3.038 0,1.678 -1.355,3.042 -3.039,3.042 M 15.052,23.3 c -1.677,0 -3.042,1.357 -3.042,3.035 0,1.678 1.363,3.042 3.042,3.042 1.674,0 3.036,-1.364 3.036,-3.042 0,-1.678 -1.363,-3.035 -3.036,-3.035 m -0.003,-5.99 22.576,0 c 4.979,0 9.027,4.047 9.027,9.027 0,4.979 -4.049,9.031 -9.027,9.031 l -22.576,0 c -4.977,0 -9.0299993,-4.053 -9.0299993,-9.031 C 6.0180007,21.357 10.072,17.31 15.049,17.31 m 22.576,24.076 c 8.299,0 15.047,-6.75 15.047,-15.049 0,-8.299 -6.748,-15.051 -15.047,-15.051 l -22.576,0 C 6.7500007,11.286 6.9250488e-7,18.038 6.9250488e-7,26.337 6.9250488e-7,34.636 6.7500007,41.386 15.049,41.386 l 22.576,0"
|
||||
id="path21"
|
||||
style="fill:#ffffff"
|
||||
sodipodi:nodetypes="csssccsssccsssscccsssssc" /></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -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}
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
@loaderSpeed: 2s;
|
||||
@loaderAngle: 5deg;
|
||||
|
||||
@large : 200px;
|
||||
@ -32,7 +32,7 @@
|
||||
@input : 'pxt';
|
||||
@label : 'pxt';
|
||||
@list : 'pxt';
|
||||
@loader : 'pulsar';
|
||||
@loader : 'pxt';
|
||||
@rail : 'pxt';
|
||||
@reveal : 'pxt';
|
||||
@segment : 'pxt';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user