2017-04-27 15:29:31 +01:00
<!doctype html>
< html >
< head >
2017-08-15 17:41:27 +01:00
< base href = "/" >
2017-04-27 15:29:31 +01:00
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
2017-09-14 17:01:44 +01:00
< meta name = "description" content = "LocalLoop - Tracking Local Spending" >
< meta name = "author" content = "Pear Trading Ltd & Shadowcat Systems Ltd" >
< meta name = "keyword" content = "LocalLoop,Local Spending,Local,Money,Loop,Traders,Pear Trading,Pear Points" >
2017-04-27 15:29:31 +01:00
< link rel = "shortcut icon" href = "assets/img/favicon.png" >
2017-09-14 17:01:44 +01:00
< title > LocalLoop - Tracking Local Spending< / title >
2017-04-27 15:29:31 +01:00
<!-- Icons -->
< link href = "assets/css/font-awesome.min.css" rel = "stylesheet" >
< link href = "assets/css/simple-line-icons.css" rel = "stylesheet" >
2017-08-25 14:00:29 +01:00
< link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet" >
2017-04-27 15:29:31 +01:00
< / head >
2017-08-15 17:41:27 +01:00
< body class = "app header-fixed sidebar-fixed" >
2017-04-27 15:29:31 +01:00
<!-- Enable bootstrap 4 theme -->
< script > window . _ _theme = 'bs4' ; < / script >
2017-09-14 17:01:55 +01:00
< app-root >
< style type = "text/css" >
2017-09-14 17:02:44 +01:00
/* nabbed wholeheartedly from http://tobiasahlin.com/spinkit/*/
2017-09-14 17:01:55 +01:00
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
< / style >
< div class = "sk-folding-cube" >
< div class = "sk-cube1 sk-cube" > < / div >
< div class = "sk-cube2 sk-cube" > < / div >
< div class = "sk-cube4 sk-cube" > < / div >
< div class = "sk-cube3 sk-cube" > < / div >
< / div >
< / app-root >
2017-04-27 15:29:31 +01:00
< / body >
< / html >
