* {
margin: 0;
padding: 0;
}
body {
background-color: black;
color: hsla(181, 71%, 93%, 1);
font-family: 'Syncopate', sans-serif;
}
.title, .subtitle {
text-align: center;
width: 100%;
text-shadow: 0 0px 10px hsla(181, 71%, 93%, 1);
font-variant: small-caps;
box-sizing: border-box;
}
.title {
padding: 1em 1em 0;
margin: 1em 1em 0;
letter-spacing: 0.1em
}
.subtitle {
padding: 0 1em 1em;
margin: 0 1em 1em;
letter-spacing: 0.5em;
text-indent: 1.5em;
font-variant: all-small-caps;
}
.parent {
display: flex;
/* flex-direction: column-reverse; */
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #000;
width:100%;
transform: scale(0.5) translate(7%, -50%);
}
.loader-wrap {
position: relative;
width: 100%;
min-width: 700px;
height: 100vh;
max-height: 700px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
/* border: 1px inset; */
width: 100%;
border-radius: 10px;
box-shadow: 0 0 50px -3px #ffffff, inset 2px 2px 10px -4px #ffffff47;
box-shadow: inset 3px 3px 20px -7px #000000, inset -3px -3px 20px -7px white;
padding: 200px;
box-sizing: border-box;
overflow:hidden;
background-color: black;
}
.loader-wrap:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #000000;
background-image: url(https://www.transparenttextures.com/patterns/real-carbon-fibre.png);
}
.loader {
position: relative;
}
/*** Loader 1 ***/
@keyframes loader1 {
50% {
width: 300px;
height: 300px;
}
}
@keyframes loader1circle {
0%, 100%{
box-shadow: inset 0 0 12px -2px #d1e8e2;
}
50% {
border-radius: 50%;
background-color: #2c3531;
box-shadow: inset 0 0 40px #d1e8e2;
}
}
.loader1 {
width: 200px;
height: 200px;
animation: loader1 1.5s ease infinite;
}
.loader1 span {
position: absolute;
width: 100px;
height: 100px;
animation: loader1circle 1.5s ease infinite;
box-shadow: inset 0 0 12px -2px #d1e8e2;
}
.loader1 span:nth-child(1) {
top: 0;
left: 0;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
}
.loader1 span:nth-child(2) {
top: 0;
right: 0;
background-color: #116466;
box-shadow: 0 0 20px #116466;
}
.loader1 span:nth-child(3) {
bottom: 0;
left: 0;
background-color: #116466;
box-shadow: 0 0 20px #116466;
}
.loader1 span:nth-child(4) {
bottom: 0;
right: 0;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
}
/*** Loader 2 ***/
@keyframes loader2 {
0%, 50%, 100% {
transform: scale(1);
}
60% {
transform: scale(2);
}
}
.loader2 {
width: 200px;
height: 100px;
}
.loader2 span {
width: 20px;
height: 100px;
border-radius:20px;
position: absolute;
top 0;
}
.loader2 span:nth-child(1) {
left: 0;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
animation: loader2 3s ease infinite ;
}
.loader2 span:nth-child(2) {
left: 25px;
background-color: #116466;
box-shadow: 0 0 20px #116466;
animation: loader2 3s ease infinite 0.15s;
}
.loader2 span:nth-child(3) {
left: 50px;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
animation: loader2 3s ease infinite 0.3s;
}
.loader2 span:nth-child(4) {
left: 75px;
background-color: #116466;
box-shadow: 0 0 20px #116466;
animation: loader2 3s ease infinite 0.6s;
}
.loader2 span:nth-child(5) {
left: 100px;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
animation: loader2 3s ease infinite 0.75s;
}
.loader2 span:nth-child(6) {
left: 128px;
background-color: #116466;
box-shadow: 0 0 20px #116466;
animation: loader2 3s ease infinite 0.9s;
}
.loader2 span:nth-child(7) {
left: 150px;
background-color: #2c3531;
box-shadow: 0 0 20px #2c3531;
animation: loader2 3s ease infinite 1.05s;
}
.loader2 span:nth-child(8) {
left: 175px;
background-color: #116466;
box-shadow: 0 0 20px #116466;
animation: loader2 3s ease infinite 1.20s
}
/*** Loader 3 ***/
@keyframes loader3before {
50% {
transform: rotate(0);
}
0%, 100% {
transform: rotate(360deg);
}
}
@keyframes loader3after {
50% {
transform: rotate(0);
}
0%, 100% {
transform: rotate(360deg);
}
}
@keyframes loader3 {
0%, 100% {
transform: rotate(0);
}
50% {
transform: rotate(-360deg);
padding: 7%;
}
}
.loader3 {
width: 300px;
height: 150px;
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
border-radius: 50%;
overflow: hidden;
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-shadow: inset 0 0 20px -9px hsla(181, 71%, 83%, 0.74), 0 0 40px -17px hsla(181, 71%, 83%, 0.74);
border-radius: 50%;
/* background-color: hsla(181, 71%, 83%, 0.74); */
animation: loader3 4s ease infinite;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
/* background-image: radial-gradient(hsla(181, 71%, 80%, 1), hsla(181, 71%, 80%, 0.47), transparent 70%); */
}
.loader3:before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - 50px);
border-bottom: 100px solid #2c3531;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
animation: loader3before 7s ease infinite;
}
.loader3:after {
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
right: calc(50% - 50px);
border-top: 100px solid #116466;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
animation: loader3after 7s ease infinite;
}
/*** Loader 4 ***/
@keyframes loader4before {
50% {
transform: rotate(0);
}
0%, 100% {
transform: rotate(360deg);
}
}
@keyframes loader4after {
50% {
transform: rotate(0);
}
0%, 100% {
transform: rotate(360deg);
}
}
@keyframes loader4 {
0%, 100% {
transform: rotate(0);
}
50% {
transform: rotate(-360deg);
border-radius: 0;
width: 0;
height:0;
border-width: 105px;
}
}
.loader4 {
width: 200px;
height: 200px;
border: 10px solid #116466;
border-top-color: #2c3531;
border-left-color: #2c3531;
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
border-radius: 50%;
overflow: hidden;
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74);
/* background-color: hsla(181, 71%, 83%, 0.74); */
animation: loader4 5s ease infinite;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
/* background-image: radial-gradient(hsla(181, 71%, 80%, 1), hsla(181, 71%, 80%, 0.47), transparent 70%); */
}
.loader4:before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - 50px);
border-bottom: 100px solid #2c3531;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
animation: loader4before 7s ease infinite;
}
.loader4:after {
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
right: calc(50% - 50px);
border-top: 100px solid #116466;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
animation: loader4after 7s ease infinite;
}
/*** Loader 5 ***/
@keyframes loader5 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader5reverse {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
.loader5 {
width: 200px;
height: 200px;
border: 10px solid #116466;
border-top-color: #2c3531;
border-left-color: #2c3531;
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
border-radius: 50%;
overflow: hidden;
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74);
/* background-color: hsla(181, 71%, 83%, 0.74); */
animation: loader5reverse 14s linear infinite;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
/* background-image: radial-gradient(hsla(181, 71%, 80%, 1), hsla(181, 71%, 80%, 0.47), transparent 70%); */
}
.loader5:before {
content: '';
width: 4px;
height: 100px;
position: absolute;
top: 100pxpx;
left: calc(50% - 2px);
background-color: #2c3531;
transform-origin: bottom;
animation: loader5 7s linear infinite;
}
/*** Loader 6 ***/
@keyframes loader6 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader6reverse {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
.loader6 {
width: 200px;
height: 200px;
border: 10px solid #116466;
border-top-color: hsla(181, 71%, 92%, 0.5);
border-left-color: hsla(181, 71%, 92%, 0.5);
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
border-radius: 50%;
overflow: hidden;
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74);
/* background-color: hsla(181, 71%, 83%, 0.74); */
animation: loader6 14s linear infinite;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
}
.loader6 span {
left: 0;
top: 0;
border-radius:50%;
position: absolute;
border: 10px solid #116466;
border-top-color: hsla(181, 71%, 92%, 0.17);
border-left-color: hsla(181, 71%, 92%, 0.17);
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
border-radius: 50%;
background:transparent;
box-sizing: border-box;
}
.loader6 span:nth-child(1) {
width: 180px;
height: 180px;
margin: 10px;
box-shadow: 0 0 20px #2c3531;
animation: loader6reverse 3s linear infinite ;
}
.loader6 span:nth-child(2) {
width: 140px;
height: 140px;
margin: 30px;
box-shadow: 0 0 20px #2c3531;
animation: loader6 3s linear infinite
}
.loader6 span:nth-child(3) {
width: 100px;
height: 100px;
margin: 50px;
box-shadow: 0 0 20px #2c3531;
animation: loader6reverse 3s linear infinite ;
}
/*** Loader 7 ***/
@keyframes loader7a {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader7b {
0% {
transform: rotate(240deg);
}
100% {
transform: rotate(-120deg);
}
}
@keyframes loader7c {
0% {
transform: rotate(120deg);
}
100% {
transform: rotate(480deg);
}
}
.loader7 {
width: 200px;
height: 200px;
/* border: 10px solid #116466; */
/* border-top-color: hsla(181, 71%, 92%, 0.5); */
/* border-left-color: hsla(181, 71%, 92%, 0.5); */
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
/* border-radius: 50%; */
/* overflow: hidden; */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74); */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* animation: loader6 14s linear infinite; */
/* background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%); */
}
.loader7 .loader7inner {
position: absolute;
border: 5px solid transparent;
border-top-color: hsla(181, 71%, 92%, 1);
border-bottom-color: hsla(181, 71%, 92%, 1);
padding:0;
box-shadow: inset 0 0 50px 3px #2c3531, 0 0 80px #116466;
border-radius: 50%;
background:transparent;
}
.loader7 .loader7inner:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 20px #2c3531;
animation: loader7a 3s linear infinite ;
}
.loader7 .loader7inner:nth-child(2) {
top: 20px;
left: 20px;
width: 160px;
height: 160px;
box-shadow: 0 0 20px #2c3531;
animation: loader7b 3s linear infinite
}
.loader7 .loader7inner:nth-child(3) {
top: 40px;
left: 40px;
width: 120px;
height: 120px;
box-shadow: 0 0 20px #2c3531;
animation: loader7c 3s linear infinite
}
/*** Loader 8 ***/
@keyframes loader8a {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader8b {
0% {
transform: rotate(240deg);
}
100% {
transform: rotate(-120deg);
}
}
@keyframes loader8c {
0% {
transform: rotate(120deg);
}
100% {
transform: rotate(480deg);
}
}
.loader8 {
width: 200px;
height: 200px;
/* border: 10px solid #116466; */
/* border-top-color: hsla(181, 71%, 92%, 0.5); */
/* border-left-color: hsla(181, 71%, 92%, 0.5); */
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
/* border-radius: 50%; */
/* overflow: hidden; */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74); */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* animation: loader6 14s linear infinite; */
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
}
.loader8 .loader8inner {
position: absolute;
border: 5px solid transparent;
border-top-color: hsla(181, 71%, 92%, 1);
border-bottom-color: hsla(181, 71%, 92%, 1);
padding:0;
box-shadow: inset 0 0 20px 3px #2c3531, 0 0 55px 15px #116466;
border-radius: 50%;
background:transparent;
}
.loader8 .loader8inner:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 100%;
/* box-shadow: 0 0 20px #2c3531; */
animation: loader8a 3s linear infinite ;
}
.loader8 .loader8inner:nth-child(2) {
top: 20px;
left: 20px;
width: 160px;
height: 160px;
/* box-shadow: 0 0 20px #2c3531; */
animation: loader8b 3s linear infinite
}
.loader8 .loader8inner:nth-child(3) {
top: 40px;
left: 40px;
width: 120px;
height: 120px;
/* box-shadow: 0 0 20px #2c3531; */
animation: loader8c 3s linear infinite
}
/*** Loader 9 ***/
@keyframes loader9 {
50% {
transform: scale(1);
}
0%, 100% {
transform: scale(0);
}
}
@keyframes loader9b {
0% {
transform: rotate(240deg);
}
100% {
transform: rotate(-120deg);
}
}
@keyframes loader9c {
0% {
transform: rotate(120deg);
}
100% {
transform: rotate(480deg);
}
}
.loader9 {
width: 200px;
height: 200px;
/* border: 10px solid #116466; */
/* border-top-color: hsla(181, 71%, 92%, 0.5); */
/* border-left-color: hsla(181, 71%, 92%, 0.5); */
padding:0;
/* box-shadow: inset 0 0 50px 3px #2c3531; */
/* border-radius: 50%; */
/* overflow: hidden; */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74); */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* animation: loader6 14s linear infinite; */
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
}
.loader9:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
/* border: 5px solid transparent; */
/* border-top-color: hsla(181, 71%, 92%, 1);
border-bottom-color: hsla(181, 71%, 92%, 1); */
/* padding:0; */
box-shadow: inset 0 0 20px 3px #2c3531, 0 0 55px 15px #116466;
border-radius: 50%;
/* background:transparent; */
animation: loader9 2s ease infinite 1s;
}
.loader9:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
/* border: 5px solid transparent; */
/* border-top-color: hsla(181, 71%, 92%, 1);
border-bottom-color: hsla(181, 71%, 92%, 1); */
/* padding:0; */
box-shadow: inset 0 0 20px 3px #2c3531, 0 0 55px 15px #116466;
border-radius: 50%;
/* background:transparent; */
animation: loader9 2s ease infinite;
}
/*** Loader 10 ***/
@keyframes loader10 {
50% {
transform: rotate(0);
}
}
@keyframes loader10self {
0% {
transform: rotateY(0);
left: -300px;
}
48% {
transform: rotateY(0);
left: 300px;
}
52% {
transform: rotateY(180deg);
}
98% {
left: -300px;
transform: rotateY(180deg);
}
100% {
left: -300px
}
}
.loader10 {
width: 200px;
height: 200px;
/* border: 10px solid #116466; */
/* border-top-color: hsla(181, 71%, 92%, 0.5); */
/* border-left-color: hsla(181, 71%, 92%, 0.5); */
/* padding:0; */
/* box-shadow: 0 0 50px 3px #2c3531; */
/* border-radius: 50%; */
/* overflow: hidden; */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74); */
/* background-color: hsla(181, 71%, 83%, 0.74); */
/* animation: loader6 14s linear infinite; */
/* background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%); */
background: transparent;
animation: loader10self 3s linear infinite;
}
.loader10:before {
position: absolute;
content:'';
width: 200px;
height: 100px;
top: 0;
left: 0;
background-color: #116466;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
transform: rotate(-30deg);
animation: loader10 0.3s ease infinite;
}
.loader10:after {
position: absolute;
content:'';
width: 200px;
height: 100px;
bottom: 0;
left: 0;
background-color: #116466;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
transform: rotate(30deg);
animation: loader10 0.3s ease infinite;
}
/*** Loader 11 ***/
@keyframes loader11 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
box-shadow: none;
}
}
@keyframes loader11bg {
0% {
background-color: hsla(0, 0%, 90%, );
}
20% {
background-color: hsla(0, 0%, 80%, 0.9);
}
40% {
background-color: hsla(0, 0%, 60%, 0.6);
}
60% {
background-color: hsla(0, 0%, 40%, 0.4);
}
80% {
background-color: hsla(0, 0%, 20%, 0.2);
}
100% {
background-color:hsla(0, 0%, 0%, 0);
}
}
.loader11 {
width: 200px;
height: 200px;
border: 20px solid #116466;
border-top-color: hsla(181, 71%, 92%, 0.5);
border-bottom-color: hsla(181, 71%, 92%, 0.5);
/* padding:0; */
box-shadow: 0 0 50px 3px #2c3531;
border-radius: 50%;
/* overflow: hidden; */
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74);
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-sizing: border-box;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
animation: loader11 1s linear infinite;
}
.loader11:before {
position: absolute;
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #116466;
left: calc(50% - 50px);
top: calc(50% - 50px);
animation: loader11bg 3s ease infinite;
}
/*** Loader 12 ***/
@keyframes loader12 {
0%, 100% {
transform: rotateY(0) ;
}
33% {
transform: rotateY(180deg) ;
border-bottom-color: hsla(181, 71%, 92%, 0.5);
}
66% {
transform: rotateY(120deg) ;
}
}
@keyframes loader12bg {
0% {
/* background-color: hsla(0, 0%, 90%, ); */
}
20% {
/* background-color: hsla(0, 0%, 80%, 0.9); */
}
40% {
background-color: #116466;
}
60% {
/* background-color: hsla(0, 0%, 40%, 0.4); */
}
80% {
/* background-color: hsla(0, 0%, 20%, 0.2); */
}
100% {
/* background-color:hsla(0, 0%, 0%, 0); */
}
}
.loader12 {
width: 0;
height: 0;
border-bottom: 200px solid #116466;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
/* border-top-color: hsla(181, 71%, 92%, 0.5);
border-bottom-color: hsla(181, 71%, 92%, 0.5); */
/* padding:0; */
/* box-shadow: 0 0 50px 3px #2c3531; */
border-radius: 50%;
/* overflow: hidden; */
background-color: hsla(181, 71%, 83%, 0.74);
/* box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74); */
/* background-color: hsla(181, 71%, 83%, 0.74); */
box-sizing: border-box;
background-image: radial-gradient(#ffffff, #ffffff9c, transparent 70%);
animation: loader12 3s linear infinite;
}
.loader12:before {
position: absolute;
content: '';
width: 50px;
height: 50px;
border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
background-color: hsla(181, 71%, 92%, 0.5);
left: 100%;
top: 0;
transform: rotate(45deg)translate(-125%, -55%);
animation: loader12bg 3s linear infinite;
}
.loader12:after {
position: absolute;
content: '';
top: -50px;
left: 0;
width: 0;
height: 0;
transform: translateY(-300%);
box-shadow: inset 0 0 20px 24px hsla(0, 0%, 100%, 0.74), 0 0 50px 22px hsla(181, 71%, 83%, 0.74);
}
!
