mirror of
https://github.com/greflm13/StaticGalleryBuilder.git
synced 2026-02-05 11:09:26 +00:00
added loader to imagelist
This commit is contained in:
@@ -118,3 +118,23 @@ body {
|
||||
color: var(--bcolor1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
border-top: 3px solid var(--bcolor1);
|
||||
border-right: 3px solid transparent;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -116,4 +116,24 @@ body {
|
||||
background-color: var(--color2);
|
||||
color: var(--bcolor2);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
border-top: 3px solid var(--bcolor2);
|
||||
border-right: 3px solid transparent;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -96,6 +96,52 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: rotate 1s linear infinite
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--bcolor2);
|
||||
animation: prixClipFix 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes prixClipFix {
|
||||
0% {
|
||||
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
|
||||
}
|
||||
|
||||
25% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
|
||||
}
|
||||
|
||||
75% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -96,6 +96,52 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: rotate 1s linear infinite
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--bcolor2);
|
||||
animation: prixClipFix 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes prixClipFix {
|
||||
0% {
|
||||
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
|
||||
}
|
||||
|
||||
25% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
|
||||
}
|
||||
|
||||
75% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");
|
||||
|
||||
* {
|
||||
--color1: #FF7F50; /* Coral */
|
||||
--color2: #D2691E; /* Chocolate */
|
||||
--color3: #8B4513; /* SaddleBrown */
|
||||
--color4: #FFA07A; /* LightSalmon */
|
||||
--bcolor1: #FFF8DC; /* Cornsilk */
|
||||
--bcolor2: #2F4F4F; /* DarkSlateGray */
|
||||
--bcolor3: #3E2723; /* Darker brown */
|
||||
--bcolor4: #4E342E; /* Slightly lighter brown */
|
||||
--color1: #FF7F50;
|
||||
/* Coral */
|
||||
--color2: #D2691E;
|
||||
/* Chocolate */
|
||||
--color3: #8B4513;
|
||||
/* SaddleBrown */
|
||||
--color4: #FFA07A;
|
||||
/* LightSalmon */
|
||||
--bcolor1: #FFF8DC;
|
||||
/* Cornsilk */
|
||||
--bcolor2: #2F4F4F;
|
||||
/* DarkSlateGray */
|
||||
--bcolor3: #3E2723;
|
||||
/* Darker brown */
|
||||
--bcolor4: #4E342E;
|
||||
/* Slightly lighter brown */
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -102,6 +110,54 @@
|
||||
font-family: "Playfair Display", serif;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
animation-fill-mode: both;
|
||||
animation: bblFadInOut 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: var(--bcolor2);
|
||||
font-size: 7px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes bblFadInOut {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor3);
|
||||
@@ -109,4 +165,4 @@ body {
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
@@ -95,6 +95,36 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--color1);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -103,6 +103,91 @@
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
|
||||
.loader {
|
||||
transform: rotateZ(45deg);
|
||||
perspective: 1000px;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: var(--color1);
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
transform: rotateX(70deg);
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
color: var(--bcolor4);
|
||||
transform: rotateY(70deg);
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateccw {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: .2em 0px 0 0px currentcolor;
|
||||
}
|
||||
|
||||
12% {
|
||||
box-shadow: .2em .2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: 0 .2em 0 0px currentcolor;
|
||||
}
|
||||
|
||||
37% {
|
||||
box-shadow: -.2em .2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: -.2em 0 0 0 currentcolor;
|
||||
}
|
||||
|
||||
62% {
|
||||
box-shadow: -.2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 0px -.2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
87% {
|
||||
box-shadow: .2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -95,6 +95,36 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--color1);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -74,6 +74,27 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
border-top: 3px solid var(--bcolor1);
|
||||
border-right: 3px solid transparent;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--color4);
|
||||
|
||||
@@ -74,6 +74,27 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
border-top: 3px solid var(--bcolor2);
|
||||
border-right: 3px solid transparent;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor1);
|
||||
|
||||
@@ -93,6 +93,36 @@
|
||||
background-color: var(--color1);
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--color1);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -94,6 +94,36 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--bcolor1);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor2);
|
||||
|
||||
@@ -77,6 +77,91 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
transform: rotateZ(45deg);
|
||||
perspective: 1000px;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: var(--color2);
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
transform: rotateX(70deg);
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
color: var(--color4);
|
||||
transform: rotateY(70deg);
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateccw {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: .2em 0px 0 0px currentcolor;
|
||||
}
|
||||
|
||||
12% {
|
||||
box-shadow: .2em .2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: 0 .2em 0 0px currentcolor;
|
||||
}
|
||||
|
||||
37% {
|
||||
box-shadow: -.2em .2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: -.2em 0 0 0 currentcolor;
|
||||
}
|
||||
|
||||
62% {
|
||||
box-shadow: -.2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 0px -.2em 0 0 currentcolor;
|
||||
}
|
||||
|
||||
87% {
|
||||
box-shadow: .2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor4);
|
||||
|
||||
@@ -98,6 +98,36 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--color4);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor3);
|
||||
background-color: var(--bcolor1);
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
* {
|
||||
--color1: #FFB6C1; /* LightPink */
|
||||
--color2: #98FB98; /* PaleGreen */
|
||||
--color3: #FFD700; /* Gold */
|
||||
--color4: #87CEFA; /* LightSkyBlue */
|
||||
--bcolor1: #FFFFFF; /* White */
|
||||
--bcolor2: #2F4F4F; /* DarkSlateGray */
|
||||
--bcolor3: #FAF0E6; /* Linen */
|
||||
--bcolor4: #E6E6FA; /* Lavender */
|
||||
--color1: #FFB6C1;
|
||||
/* LightPink */
|
||||
--color2: #98FB98;
|
||||
/* PaleGreen */
|
||||
--color3: #FFD700;
|
||||
/* Gold */
|
||||
--color4: #87CEFA;
|
||||
/* LightSkyBlue */
|
||||
--bcolor1: #FFFFFF;
|
||||
/* White */
|
||||
--bcolor2: #2F4F4F;
|
||||
/* DarkSlateGray */
|
||||
--bcolor3: #FAF0E6;
|
||||
/* Linen */
|
||||
--bcolor4: #E6E6FA;
|
||||
/* Lavender */
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -102,6 +110,54 @@
|
||||
font-family: "Lora", serif;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
animation-fill-mode: both;
|
||||
animation: bblFadInOut 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: var(--bcolor2);
|
||||
font-size: 7px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes bblFadInOut {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
@@ -109,4 +165,4 @@ body {
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
@@ -102,6 +102,52 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: rotate 1s linear infinite
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--color2);
|
||||
animation: prixClipFix 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes prixClipFix {
|
||||
0% {
|
||||
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
|
||||
}
|
||||
|
||||
25% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
|
||||
}
|
||||
|
||||
75% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor2);
|
||||
@@ -109,4 +155,4 @@ body {
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
@@ -104,6 +104,54 @@
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
animation-fill-mode: both;
|
||||
animation: bblFadInOut 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: var(--bcolor2);
|
||||
font-size: 7px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes bblFadInOut {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -96,6 +96,36 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: var(--color1);
|
||||
box-sizing: border-box;
|
||||
animation: animloader 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor1);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
@@ -111,6 +111,54 @@
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
animation-fill-mode: both;
|
||||
animation: bblFadInOut 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: var(--bcolor2);
|
||||
font-size: 7px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes bblFadInOut {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--bcolor2);
|
||||
background-color: var(--bcolor3);
|
||||
|
||||
Reference in New Issue
Block a user