Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
React Splash Screen Spinner with @keyframes does not work after a split second
same question on stackoverflow https://stackoverflow.com/questions/75384661/react-splash-screen-spinner-with-keyframes-does-not-work-after-a-split-second
React application that uses a spinner with css @keyframes. the spinner works for a split second before becoming broken here is the problem
https://i.stack.imgur.com/jd7dI.gif
the code PUBLIC/index.html
<html lang="en">
<head>
<link
rel="stylesheet"
id="layout-styles-anchor"
href="%PUBLIC_URL%/css/splash-screen.css"
/>
<link
rel="stylesheet"
id="layout-styles-anchor2"
href="%PUBLIC_URL%/css/spin.css"
/>
<script
crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js?features=es2017%2Cdefault%2Ces2015%2Ces2016%2CIntl"
></script>
</head>
<body id="kt_body">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="splash-screen" class="kt-splash-screen">
<img
src="%PUBLIC_URL%/media/logos/tigmat/logo-name.png" width="90px"
alt="Tigmat imageLink"
/>
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
<div id="layout-portal"></div>
</body>
</html>PUBLIC/css/spin.css from https://codepen.io/martinvd/pen/xbQJom
.loader {
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #29b2b1;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #29b2b1;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #29b2b1;
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}As for the react code: index.js, note setTimeout is there just so I can experiment
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
import ReactDOM from "react-dom";
import axios from "./tigmat/axios/axios";
import * as _redux from "./redux";
import store, {persistor} from "./redux/store";
import App from "./app/App";
import "./index.scss"; // Standard version
import "./_metronic/_assets/plugins/keenthemes-icons/font/ki.css";
import "socicon/css/socicon.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "./_metronic/_assets/plugins/flaticon/flaticon.css";
import "./_metronic/_assets/plugins/flaticon2/flaticon.css";
import "react-datepicker/dist/react-datepicker.css";
import {
MetronicLayoutProvider,
MetronicSplashScreenProvider,
MetronicSubheaderProvider
} from "./_metronic/layout";
import {MetronicI18nProvider} from "./_metronic/i18n";
import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";
import "video-react/styles/scss/video-react.scss";
import "./tigmat/scss/font/fira_code.css";
setTimeout(() => {
ReactDOM.render(
<MetronicI18nProvider>
<MetronicLayoutProvider>
<MetronicSubheaderProvider>
<MetronicSplashScreenProvider>
<App store = {store} persistor = {persistor} basename = {PUBLIC_URL}/>
</MetronicSplashScreenProvider>
</MetronicSubheaderProvider>
</MetronicLayoutProvider>
</MetronicI18nProvider>,
document.getElementById("root")
);
}, 20000)Any ideas what is the solution to this?
Replies (3)
Hi Mehdi Hafid,
Unfortunately, we were not able to reproduce this issue in the latest Metornic version.
Please make sure that your custom styles or styles inside dependencies which you connected don't override loader styles.
You can inspect your loader and check how style changes when this loader issue appears.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I'm using Metronic 7, I forgot to mention that
Hi Mehdi Hafid,
We recheck your code in Metronic 7 but still didn't have this issue.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
