HTML
<!-- SEMpaTJA website
Link: http://www.sempatja.si/
HTML and CSS Only
-->
<div id="preloader-time">
<a class="loader" href="http://www.sempatja.si/" target="_blank">
<div class="scooter scooter-jump">
<div class="kolo-levo kolo spin-normal"></div>
<div class="kolo-desno kolo spin-normal"></div>
<div class="ogrodje blatnik"></div>
<div class="ogrodje stanga-spodaj"></div>
<div class="ogrodje prekat"></div>
<div class="ogrodje balanca-1"></div>
<div class="ogrodje rocka-levo"></div>
<div class="ogrodje rocka-desno"></div>
</div>
<!-- .scooter -->
<div class="obstacle obstacle-movement"></div>
<!-- obstacle -->
</a>
</div>
SCSS
/*
* You can see altered version on http://www.sempatja.si/
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#preloader-time {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#preloader-time {
background-color: #00aeef;
}
#preloader-time .loader {
width: 340px;
max-width: 100%;
height: 200px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
font-size: 100%;
overflow: hidden;
//border-bottom:1px dashed #fff;
}
#preloader-time .scooter {
position: absolute;
top: 0;
height: 100%;
left: 25%;
width: 12em;
}
#preloader-time .kolo {
width: 2.5em;
height: 2.5em;
position: absolute;
background-color: transparent;
border: 0.45em solid #231f20;
border-radius: 50%;
bottom: 0;
}
#preloader-time .kolo:after {
content: "";
position: absolute;
top: -0.0em;
left: -0.05em;
background-color: #fff;
width: 0.20em;
height: 0.20em;
border-radius: 50%;
}
#preloader-time .kolo-levo {
left: 0;
}
#preloader-time .kolo-desno {
left: 8.5em;
}
#preloader-time .ogrodje {
position: absolute;
height: 0.4em;
width: 0.4em;
background-color: #fff;
border-radius: 0.2em;
}
#preloader-time .blatnik {
width: 3.9em;
height: 3.9em;
left: -0.7em;
bottom: -0.7em;
border-radius: 50%;
border: 0.45em solid #fff;
border-left: 0.45em solid transparent;
border-bottom: 0.45em solid transparent;
border-right: 0.45em solid transparent;
background-color: transparent;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotate(43deg);
-ms-transform: rotate(43deg);
-o-transform: rotate(43deg);
-webkit-transform: rotate(43deg);
transform: rotate(43deg);
}
#preloader-time .prekat {
width: 4.3em;
border-radius: 0;
bottom: 0.92em;
left: 6.65em;
-o-transform-origin: 0em 0em;
-ms-transform-origin: 0em 0em;
-moz-transform-origin: 0em 0em;
-webkit-transform-origin: 0em 0em;
transform-origin: 0em 0em;
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#preloader-time .stanga-spodaj {
bottom: 1.05em;
width: 5.75em;
left: 1.20em;
border-radius: 0.2em 0 0 0.2em;
}
#preloader-time .balanca-1 {
height: 8.5em;
bottom: 1.05em;
left: 9.6em;
}
#preloader-time .rocka-levo,
#preloader-time .rocka-desno {
width: 1.8em;
bottom: 9.10em;
}
#preloader-time .rocka-levo {
left: 7.6em;
}
#preloader-time .rocka-desno {
left: 10.2em;
}
#preloader-time .obstacle {
position: absolute;
width: 1.15em;
height: 1.15em;
background-color: #fff;
border-radius: 50%;
left: calc(100% - 1.15em);
bottom: 0;
}
/*
* ANIMATIONS
*/
@-o-keyframes spin-normal {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@-moz-keyframes spin-normal {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes spin-normal {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes spin-normal {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin-normal {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spin-normal {
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-animation: spin-normal 0.35s linear infinite;
-ms-animation: spin-normal 0.35s linear infinite;
-o-animation: spin-normal 0.35s linear infinite;
-webkit-animation: spin-normal 0.35s linear infinite;
animation: spin-normal 0.35s linear infinite;
}
@-ms-keyframes obstacle-movement {
0% {
width: 0;
height: 0;
opacity: 0;
left: calc(100% - 1.1em);
}
20% {
width: 1.1em;
height: 1.1em;
opacity: 1;
left: calc(100% - 1.1em);
}
100% {
left: -210%;
}
}
@-o-keyframes obstacle-movement {
0% {
width: 0;
height: 0;
opacity: 0;
left: calc(100% - 1.1em);
}
20% {
width: 1.1em;
height: 1.1em;
opacity: 1;
left: calc(100% - 1.1em);
}
100% {
left: -210%;
}
}
@-moz-keyframes obstacle-movement {
0% {
width: 0;
height: 0;
opacity: 0;
left: calc(100% - 1.1em);
}
20% {
width: 1.1em;
height: 1.1em;
opacity: 1;
left: calc(100% - 1.1em);
}
100% {
left: -210%;
}
}
@-webkit-keyframes obstacle-movement {
0% {
width: 0;
height: 0;
opacity: 0;
left: calc(100% - 1.1em);
}
20% {
width: 1.1em;
height: 1.1em;
opacity: 1;
left: calc(100% - 1.1em);
}
100% {
left: -210%;
}
}
@keyframes obstacle-movement {
0% {
width: 0;
height: 0;
opacity: 0;
left: calc(100% - 1.1em);
}
20% {
width: 1.1em;
height: 1.1em;
opacity: 1;
left: calc(100% - 1.1em);
}
100% {
left: -210%;
}
}
.obstacle-movement {
-moz-animation: obstacle-movement 2.2s linear infinite;
-ms-animation: obstacle-movement 2.2s linear infinite;
-o-animation: obstacle-movement 2.2s linear infinite;
-webkit-animation: obstacle-movement 2.2s linear infinite;
animation: obstacle-movement 2.2s linear infinite;
}
@-o-keyframes scooter-jump {
0% {
top: 0;
}
21% {
top: 0;
}
29% {
top: -3em;
}
32% {
top: -3em;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
@-ms-keyframes scooter-jump {
0% {
top: 0;
}
21% {
top: 0;
}
29% {
top: -3em;
}
32% {
top: -3em;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
@-moz-keyframes scooter-jump {
0% {
top: 0;
}
21% {
top: 0;
}
29% {
top: -3em;
}
32% {
top: -3em;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes scooter-jump {
0% {
top: 0;
}
21% {
top: 0;
}
29% {
top: -3em;
}
32% {
top: -3em;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes scooter-jump {
0% {
top: 0;
}
21% {
top: 0;
}
29% {
top: -3em;
}
32% {
top: -3em;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
.scooter-jump {
-moz-animation: scooter-jump 2.2s ease-in-out infinite;
-ms-animation: scooter-jump 2.2s ease-in-out infinite;
-o-animation: scooter-jump 2.2s ease-in-out infinite;
-webkit-animation: scooter-jump 2.2s ease-in-out infinite;
animation: scooter-jump 2.2s ease-in-out infinite;
}
