Skip to content

Instantly share code, notes, and snippets.

@sand97
Last active July 11, 2022 08:15
Show Gist options
  • Save sand97/c985c4def3c68e3b18a75321125a8004 to your computer and use it in GitHub Desktop.
Save sand97/c985c4def3c68e3b18a75321125a8004 to your computer and use it in GitHub Desktop.
Example of css export for Nextjs splash screen
export default `
body{
display: block;
}
#globalLoader{
position: fixed;
z-index: 1700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
display: flex;
left: 0,
right: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.loader {
--clr: #3498db;
/* color of spining */
width: 50px;
height: 50px;
position: relative;
}
.loader div:nth-child(1), .loader div:nth-child(2) {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 10px solid transparent;
border-top-color: var(--clr);
}
.loader div:nth-child(1) {
z-index: 100;
animation: spin 1s infinite;
}
.loader div:nth-child(2) {
border: 10px solid #ccc;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment