Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
React Splash Screen Spinner with @keyframes does not work after a split second
same question on stackoverflow
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="
></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
.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
Hi Mehdi Hafid,
We recheck your code in Metronic 7 but still didn't have this issue.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
