Skip to content

Instantly share code, notes, and snippets.

@Jonnysol

Jonnysol/index.pug

Created November 7, 2020 13:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jonnysol/1c026302643f196714e6acf3f3a60610 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jonnysol/1c026302643f196714e6acf3f3a60610 to your computer and use it in GitHub Desktop.
Download ZIP
Only CSS Loader - Wizard
Raw
index.pug
.scene
.objects
.square
.circle
.triangle
.wizard
.body
.right-arm
.right-hand
.left-arm
.left-hand
.head
.beard
.face
.adds
.hat
.hat-of-the-hat
.four-point-star(class="--first")
.four-point-star(class="--second")
.four-point-star(class="--third")
.progress
.noise
Raw
only-css-loader-wizard.markdown
Raw
script.js
/** 🧙‍♂️ */
Raw
style.scss
$primary: #3f64ce;
$skin: #f1c5b4;
$background: #ffffff;
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.scene {
display: flex;
}
/** Wizard CSS & Animations */
.wizard {
position: relative;
width: 190px;
height: 240px;
}
.body {
position: absolute;
bottom: 0;
left: 68px;
height: 100px;
width: 60px;
background: $primary;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 20px;
height: 100px;
width: 60px;
background: $primary;
transform: skewX(14deg);
}
}
.right-arm {
position: absolute;
bottom: 74px;
left: 110px;
height: 44px;
width: 90px;
background: $primary;
border-radius: 22px;
/** animation */
transform-origin: 16px 22px;
transform: rotate(70deg);
animation: right_arm 10s ease-in-out infinite;
.right-hand {
position: absolute;
right: 8px;
bottom: 8px;
width: 30px;
height: 30px;
border-radius: 50%;
background: $skin;
/** animation */
transform-origin: center center;
transform: rotate(-40deg);
animation: right_hand 10s ease-in-out infinite;
&::after {
content: "";
position: absolute;
right: 0px;
top: -8px;
width: 15px;
height: 30px;
border-radius: 10px;
background: $skin;
/** Animation */
transform: translateY(16px);
animation: right_finger 10s ease-in-out infinite;
}
}
}
.left-arm {
position: absolute;
bottom: 74px;
left: 26px;
height: 44px;
width: 70px;
background: $primary;
border-bottom-left-radius: 8px;
/** animation */
transform-origin: 60px 26px;
transform: rotate(-70deg);
animation: left_arm 10s ease-in-out infinite;
.left-hand {
position: absolute;
left: -18px;
top: 0;
width: 18px;
height: 30px;
border-top-left-radius: 35px;
border-bottom-left-radius: 35px;
background: $skin;
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 15px;
border-radius: 20px;
background: $skin;
/** Animation */
transform-origin: right bottom;
transform: scaleX(0);
animation: left_finger 10s ease-in-out infinite;
}
}
}
.head {
position: absolute;
top: 0;
left: 14px;
width: 160px;
height: 210px;
/** Animation */
transform-origin: center center;
transform: rotate(-3deg);
animation: head 10s ease-in-out infinite;
.beard {
position: absolute;
bottom: 0;
left: 38px;
height: 106px;
width: 80px;
border-bottom-right-radius: 55%;
background: $background;
&::after {
content: "";
position: absolute;
top: 16px;
left: -10px;
width: 40px;
height: 20px;
border-radius: 20px;
background: $background;
}
}
.face {
position: absolute;
bottom: 76px;
left: 38px;
height: 30px;
width: 60px;
background: $skin;
&::before {
content: "";
position: absolute;
top: 0px;
left: 40px;
width: 20px;
height: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background: $skin;
}
&::after {
content: "";
position: absolute;
top: 16px;
left: -10px;
width: 50px;
height: 20px;
border-radius: 20px;
border-bottom-right-radius: 0px;
background: $background;
}
.adds {
/** Nose */
position: absolute;
top: 0px;
left: -10px;
width: 40px;
height: 20px;
border-radius: 20px;
background: $skin;
&::after {
/** Ear */
content: "";
position: absolute;
top: 5px;
left: 80px;
width: 15px;
height: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
background: $skin;
}
}
}
.hat {
position: absolute;
bottom: 106px;
left: 0;
width: 160px;
height: 20px;
border-radius: 20px;
background: $primary;
&::before {
content: "";
position: absolute;
top: -70px;
left: 50%;
transform: translatex(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 34px 70px 50px;
border-color: transparent transparent $primary transparent;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 20px;
background: $primary;
border-radius: 20px;
}
.hat-of-the-hat {
position: absolute;
bottom: 78px;
left: 79px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 25px 19px;
border-color: transparent transparent $primary transparent;
&::after {
content: "";
position: absolute;
top: 6px;
left: -4px;
width: 35px;
height: 10px;
border-radius: 10px;
border-bottom-left-radius: 0px;
background: $primary;
transform: rotate(40deg);
}
}
.four-point-star {
position: absolute;
width: 12px;
height: 12px;
&::after,
&::before {
content: "";
position: absolute;
background: $background;
display: block;
left: 0;
width: 141.4213%; /* 100% * √2 */
top: 0;
bottom: 0;
border-radius: 10%;
transform: rotate(66.66deg) skewX(45deg);
}
&::after {
transform: rotate(156.66deg) skew(45deg);
}
&.--first {
bottom: 28px;
left: 46px;
}
&.--second {
bottom: 40px;
left: 80px;
}
&.--third {
bottom: 15px;
left: 108px;
}
}
}
}
/** 10s animation - 10% = 1s */
@keyframes right_arm {
0% {
transform: rotate(70deg);
}
10% {
transform: rotate(8deg);
}
15% {
transform: rotate(20deg);
}
20% {
transform: rotate(10deg);
}
25% {
transform: rotate(26deg);
}
30% {
transform: rotate(10deg);
}
35% {
transform: rotate(28deg);
}
40% {
transform: rotate(9deg);
}
45% {
transform: rotate(28deg);
}
50% {
transform: rotate(8deg);
}
58% {
transform: rotate(74deg);
}
62% {
transform: rotate(70deg);
}
}
@keyframes left_arm {
0% {
transform: rotate(-70deg);
}
10% {
transform: rotate(6deg);
}
15% {
transform: rotate(-18deg);
}
20% {
transform: rotate(5deg);
}
25% {
transform: rotate(-18deg);
}
30% {
transform: rotate(5deg);
}
35% {
transform: rotate(-17deg);
}
40% {
transform: rotate(5deg);
}
45% {
transform: rotate(-18deg);
}
50% {
transform: rotate(6deg);
}
58% {
transform: rotate(-74deg);
}
62% {
transform: rotate(-70deg);
}
}
@keyframes right_hand {
0% {
transform: rotate(-40deg);
}
10% {
transform: rotate(-20deg);
}
15% {
transform: rotate(-5deg);
}
20% {
transform: rotate(-60deg);
}
25% {
transform: rotate(-0deg);
}
30% {
transform: rotate(-60deg);
}
35% {
transform: rotate(-0deg);
}
40% {
transform: rotate(-40deg);
}
45% {
transform: rotate(-60deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(-40deg);
}
}
@keyframes right_finger {
0% {
transform: translateY(16px);
}
10% {
transform: none;
}
50% {
transform: none;
}
60% {
transform: translateY(16px);
}
}
@keyframes left_finger {
0% {
transform: scaleX(0);
}
10% {
transform: scaleX(1) rotate(6deg);
}
15% {
transform: scaleX(1) rotate(0deg);
}
20% {
transform: scaleX(1) rotate(8deg);
}
25% {
transform: scaleX(1) rotate(0deg);
}
30% {
transform: scaleX(1) rotate(7deg);
}
35% {
transform: scaleX(1) rotate(0deg);
}
40% {
transform: scaleX(1) rotate(5deg);
}
45% {
transform: scaleX(1) rotate(0deg);
}
50% {
transform: scaleX(1) rotate(6deg);
}
58% {
transform: scaleX(0);
}
}
@keyframes head {
0% {
transform: rotate(-3deg);
}
10% {
transform: translatex(10px) rotate(7deg);
}
50% {
transform: translatex(0px) rotate(0deg);
}
56% {
transform: rotate(-3deg);
}
}
/** Objects CSS & Animations */
.objects {
position: relative;
width: 200px;
height: 240px;
}
.square {
position: absolute;
bottom: -60px;
left: -5px;
width: 120px;
height: 120px;
border-radius: 50%;
/** Animation */
transform: rotate(-360deg);
animation: path_square 10s ease-in-out infinite;
&::after {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 50px;
height: 50px;
background: #9ab3f5;
}
}
.circle {
position: absolute;
bottom: 10px;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
/** Animation */
transform: rotate(-360deg);
animation: path_circle 10s ease-in-out infinite;
&::after {
content: "";
position: absolute;
bottom: -10px;
left: 25px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #c56183;
}
}
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
/** Animation */
transform: rotate(-360deg);
animation: path_triangle 10s ease-in-out infinite;
&::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
}
/** 10s animation - 10% = 1s */
@keyframes path_circle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-100px) rotate(-5deg);
}
55% {
transform: translateY(-100px) rotate(-360deg);
}
58% {
transform: translateY(-100px) rotate(-360deg);
}
63% {
transform: rotate(-360deg);
}
}
@keyframes path_square {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-155px) translatex(-15px) rotate(10deg);
}
55% {
transform: translateY(-155px) translatex(-15px) rotate(-350deg);
}
57% {
transform: translateY(-155px) translatex(-15px) rotate(-350deg);
}
63% {
transform: rotate(-360deg);
}
}
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
.progress {
position: relative;
margin-top: 60px;
width: 400px;
height: 20px;
background: #eee;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #637373;
animation: progress 20s linear infinite;
}
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
.noise {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
z-index: 1000;
background-image: url(data:image/png;base64,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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment