mirror of
https://github.com/greflm13/StaticGalleryBuilder.git
synced 2026-02-05 02:59:27 +00:00
added loader to imagelist
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user