Preloader Çalışmıyor

Arkadaşlar merhaba,

Şuradaki kodları sayfama eklemek için kullanacağım fakat çalışmıyor. Nereyi yanlış yaptım anlamadım. Yardımcı olabilecek var mı? Dosyayı buradan bulabilirsiniz. Teşekkürler.

Merhabalar, refere göstermiş olduğunuz pende CSS ler SCSS kullanılarak yazılmış. Bunu css'e formatlayarak projenize eklerseniz muhtemelen sorununuz çözülecektir. Aşağıya formatlanmış halini ekliyorum buradan da alabilirsiniz. codepen üzerinde seçeneklerde de aynı şekilde format css diyerek ve sonrasında view compiled css derseniz o şekilde ulaşabilirsiniz.

body {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
position: relative;
background: -webkit-gradient(linear, left top, right bottom, from(#070630), to(#060454));
background: linear-gradient(to bottom right, #070630 0%, #060454 100%);
min-height: 100vh;
}

.animation-container {
display: block;
position: relative;
width: 800px;
max-width: 100%;
margin: 0 auto;
}
.animation-container .lightning-container {
position: absolute;
top: 50%;
left: 0;
display: -webkit-box;
display: flex;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.animation-container .lightning-container .lightning {
position: absolute;
display: block;
height: 12px;
width: 12px;
border-radius: 12px;
-webkit-transform-origin: 6px 6px;
transform-origin: 6px 6px;
-webkit-animation-name: woosh;
animation-name: woosh;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.animation-container .lightning-container .lightning.white {
background-color: white;
box-shadow: 0px 50px 50px 0px rgba(255, 255, 255, 0.3);
}
.animation-container .lightning-container .lightning.red {
background-color: #fc7171;
box-shadow: 0px 50px 50px 0px rgba(252, 113, 113, 0.3);
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.animation-container .boom-container {
position: absolute;
display: -webkit-box;
display: flex;
width: 80px;
height: 80px;
text-align: center;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 200px;
top: -145px;
}
.animation-container .boom-container .shape {
display: inline-block;
position: relative;
opacity: 0;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.animation-container .boom-container .shape.triangle {
width: 0;
height: 0;
border-style: solid;
-webkit-transform-origin: 50% 80%;
transform-origin: 50% 80%;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
margin-left: -15px;
border-width: 0 2.5px 5px 2.5px;
border-color: transparent transparent #42e599 transparent;
-webkit-animation-name: boom-triangle;
animation-name: boom-triangle;
}
.animation-container .boom-container .shape.triangle.big {
margin-left: -25px;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #fade28 transparent;
-webkit-animation-name: boom-triangle-big;
animation-name: boom-triangle-big;
}
.animation-container .boom-container .shape.disc {
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #d15ff4;
-webkit-animation-name: boom-disc;
animation-name: boom-disc;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animation-container .boom-container .shape.circle {
width: 20px;
height: 20px;
-webkit-animation-name: boom-circle;
animation-name: boom-circle;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 100%;
margin-left: -30px;
}
.animation-container .boom-container .shape.circle.white {
border: 1px solid white;
}
.animation-container .boom-container .shape.circle.big {
width: 40px;
height: 40px;
margin-left: 0px;
}
.animation-container .boom-container .shape.circle.big.white {
border: 2px solid white;
}
.animation-container .boom-container .shape:after {
background-color: rgba(178, 215, 232, 0.2);
}
.animation-container .boom-container .shape.triangle, .animation-container .boom-container .shape.circle, .animation-container .boom-container .shape.circle.big, .animation-container .boom-container .shape.disc {
-webkit-animation-delay: 0.38s;
animation-delay: 0.38s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
.animation-container .boom-container .shape.circle {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.animation-container .boom-container.second {
left: 485px;
top: 155px;
}
.animation-container .boom-container.second .shape.triangle, .animation-container .boom-container.second .shape.circle, .animation-container .boom-container.second .shape.circle.big, .animation-container .boom-container.second .shape.disc {
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.animation-container .boom-container.second .shape.circle {
-webkit-animation-delay: 2.15s;
animation-delay: 2.15s;
}

@-webkit-keyframes woosh {
0% {
width: 12px;
-webkit-transform: translate(0px, 0px) rotate(-35deg);
transform: translate(0px, 0px) rotate(-35deg);
}
15% {
width: 50px;
}
30% {
width: 12px;
-webkit-transform: translate(214px, -150px) rotate(-35deg);
transform: translate(214px, -150px) rotate(-35deg);
}
30.1% {
-webkit-transform: translate(214px, -150px) rotate(46deg);
transform: translate(214px, -150px) rotate(46deg);
}
50% {
width: 110px;
}
70% {
width: 12px;
-webkit-transform: translate(500px, 150px) rotate(46deg);
transform: translate(500px, 150px) rotate(46deg);
}
70.1% {
-webkit-transform: translate(500px, 150px) rotate(-37deg);
transform: translate(500px, 150px) rotate(-37deg);
}
85% {
width: 50px;
}
100% {
width: 12px;
-webkit-transform: translate(700px, 0) rotate(-37deg);
transform: translate(700px, 0) rotate(-37deg);
}
}

@keyframes woosh {
0% {
width: 12px;
-webkit-transform: translate(0px, 0px) rotate(-35deg);
transform: translate(0px, 0px) rotate(-35deg);
}
15% {
width: 50px;
}
30% {
width: 12px;
-webkit-transform: translate(214px, -150px) rotate(-35deg);
transform: translate(214px, -150px) rotate(-35deg);
}
30.1% {
-webkit-transform: translate(214px, -150px) rotate(46deg);
transform: translate(214px, -150px) rotate(46deg);
}
50% {
width: 110px;
}
70% {
width: 12px;
-webkit-transform: translate(500px, 150px) rotate(46deg);
transform: translate(500px, 150px) rotate(46deg);
}
70.1% {
-webkit-transform: translate(500px, 150px) rotate(-37deg);
transform: translate(500px, 150px) rotate(-37deg);
}
85% {
width: 50px;
}
100% {
width: 12px;
-webkit-transform: translate(700px, 0) rotate(-37deg);
transform: translate(700px, 0) rotate(-37deg);
}
}
@-webkit-keyframes boom-circle {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform: scale(3);
transform: scale(3);
}
}
@keyframes boom-circle {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform: scale(3);
transform: scale(3);
}
}
@-webkit-keyframes boom-triangle-big {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
40% {
opacity: 0;
-webkit-transform: scale(2.5) translate(50px, -50px) rotate(360deg);
transform: scale(2.5) translate(50px, -50px) rotate(360deg);
}
}
@keyframes boom-triangle-big {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
40% {
opacity: 0;
-webkit-transform: scale(2.5) translate(50px, -50px) rotate(360deg);
transform: scale(2.5) translate(50px, -50px) rotate(360deg);
}
}
@-webkit-keyframes boom-triangle {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform: scale(3) translate(20px, 40px) rotate(360deg);
transform: scale(3) translate(20px, 40px) rotate(360deg);
}
}
@keyframes boom-triangle {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform: scale(3) translate(20px, 40px) rotate(360deg);
transform: scale(3) translate(20px, 40px) rotate(360deg);
}
}
@-webkit-keyframes boom-disc {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
40% {
opacity: 0;
-webkit-transform: scale(2) translate(-70px, -30px);
transform: scale(2) translate(-70px, -30px);
}
}
@keyframes boom-disc {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
40% {
opacity: 0;
-webkit-transform: scale(2) translate(-70px, -30px);
transform: scale(2) translate(-70px, -30px);
}
}
.footer {
color: white;
font-size: 10px;
position: fixed;
bottom: 0;
font-weight: 200;
padding: 10px 20px;
}
.footer a, .footer a:hover, .footer a:focus, .footer a:visited {
color: #c6c6c6;
}

Hocam yardımın için çok teşekkür ederim.