html – Css designing for div not functioning when combining with canvas

I am utilizing Threejs and also in addition to that I am utilizing a div aspect to reveal a basic progression bar till the moment the threejs material tons. I am utilizing it in a nextjs application.

The trouble is I can not see my div aspect at the beginning. I attempted examining it my internet browser and also the aspect exists with appropriate designing. Below is my code

 const MyCanvas = () => > {
const loadingBarRef = useRef( void);.
// const [progressRatio, setProgressBarRatio] = useState( 0 );.

const canvasRef = useCallback(( node) => > {
if (node!= null) {
const scene = brand-new THREE.Scene();.

const statistics = brand-new Statistics();.

stats.showPanel( 0 );.
document.body.appendChild( stats.dom);.

const overlayGeometry = brand-new THREE.PlaneGeometry( 2, 2, 1, 1);.
const overlayMaterial = brand-new THREE.ShaderMaterial( {
clear: real,.
attires: {
uAlpha: {
worth: 1,.
},.
},.
vertexShader: '.
void primary().
{
gl_Position = vec4( setting, 1.0);.
}
',.
fragmentShader: '.
consistent float uAlpha;.

void primary() {
gl_FragColor = vec4( 0.0,0.0,0.0, uAlpha);.
}
',.
} );.
const overlay = brand-new THREE.Mesh( overlayGeometry, overlayMaterial);.

const loadingManager = brand-new THREE.LoadingManager(.
() => > {
console.log(" filled");.
window.setTimeout(() => > {}, 500);.
gsap.delayedCall( 0.5, () => > {
gsap.to( overlayMaterial.uniforms.uAlpha, {worth: 0, period: 3} );.
if (loadingBarRef.current!== null) {
loadingBarRef.current.style.transform="";.
loadingBarRef.current.style.transformOrigin="leading right";.
loadingBarRef.current.style.transition="1.5 s ease-in-out";.
}
} );.
},.
( itemUrl, itemsLoaded, itemsTotal) => > {
const progressRatio = itemsLoaded/ itemsTotal;.
// setProgressBarRatio( itemsLoaded/ itemsTotal);.
if (loadingBarRef.current!== null) {
console.log(" in progresss");.
loadingBarRef.current.style.transform='scaleX($ {progressRatio} )';.
// loadingBarRef.current.style.backgroundColor="blue";.
console.log( progressRatio);.
}
}
);.
const gltfLoader = brand-new GLTFLoader( loadingManager);.
const cubeTextureLoader = brand-new THREE.CubeTextureLoader( loadingManager);.

const environmentMap = cubeTextureLoader.load([
        "/textures/environmentMaps/0/px.jpg",
        "/textures/environmentMaps/0/nx.jpg",
        "/textures/environmentMaps/0/py.jpg",
        "/textures/environmentMaps/0/ny.jpg",
        "/textures/environmentMaps/0/pz.jpg",
        "/textures/environmentMaps/0/nz.jpg",
      ]);.

scene.background = environmentMap;.
scene.environment = environmentMap;.

const updateAllMaterials = () => > {
scene.traverse(( kid) => > {
if (.
kid instanceof THREE.Mesh &&&
&. child.material instanceof THREE.MeshStandardMaterial.
) {
// child.material.envMap = environmentMap.
child.material.envMapIntensity = 2.5;.
child.material.needsUpdate = real;.
child.castShadow = real;.
child.receiveShadow = real;.
}
} );.
};.

gltfLoader.load("/ models/FlightHelmet/glTF/ FlightHelmet.gltf", (gltf) => > {
gltf.scene.scale.set( 10, 10, 10);.
gltf.scene.position.set( 0, -4, 0);.
gltf.scene.rotation.y = Math.PI * 0.5;.
scene.add( gltf.scene);.

updateAllMaterials();.
} );.

const directionalLight = brand-new THREE.DirectionalLight(" #ffffff", 3);.
directionalLight.castShadow = real;.
directionalLight.shadow.camera.far = 15;.
directionalLight.shadow.mapSize.set( 1024, 1024);.
directionalLight.shadow.normalBias = 0.05;.
directionalLight.position.set( 0.25, 3, -2.25);.
scene.add( directionalLight);.

scene.add( overlay);.

const dimensions = {
size: window.innerWidth,.
elevation: window.innerHeight,.
};.

// Cam.
const cam = brand-new THREE.PerspectiveCamera(.
75,.
sizes.width/ sizes.height,.
0.1,.
100.
);.
camera.position.set( 4, 1, -4);.
scene.add( cam);.

const controls = brand-new OrbitControls( cam, node);.
controls.enableDamping = real;.

// Renderer.
const renderer = brand-new THREE.WebGLRenderer( {
canvas: node,.
powerPreference: "high-performance",.
antialias: real,.
} );.
renderer.toneMapping = THREE.ReinhardToneMapping;.
renderer.toneMappingExposure = 3;.
renderer.shadowMap.enabled = real;.
renderer.shadowMap.type = THREE.PCFSoftShadowMap;.
renderer.setSize( sizes.width, sizes.height);.
renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2));.

window.addEventListener(" resize", () => > {
sizes.width = window.innerWidth;.
sizes.height = window.innerHeight;.

camera.aspect = sizes.width/ sizes.height;.
camera.updateProjectionMatrix();.

renderer.setSize( sizes.width, sizes.height);.
renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2));.
} );.

window.addEventListener(" dblclick", () => > {
const fullscreenElement =.
document.fullscreenElement|| document.webkitFullscreenElement;.

if (! fullscreenElement) {
if (node.requestFullscreen) {
node.requestFullscreen();.
} else if (canvasRef.webkitRequestFullscreen) {
node.webkitRequestFullscreen();.
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();.
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();.
}
}
} );.

const clock = brand-new THREE.Clock();.

const tick = () => > {
stats.begin();.
const elapsedTime = clock.getElapsedTime();.

controls.update();.

renderer.render( scene, cam);.
window.requestAnimationFrame( tick);.

stats.end();.
};.

tick();.
}
}, []);.

return (.
<>< >.
<< div.
ref= {loadingBarRef}
className=" loading-bar"
design= {{
setting: "outright",.
top: "50%",.
size: "100%",.
elevation: "2px",.
history: "#ffffff",.
change: 'scaleX( 0 )',.
transformOrigin: "leading left",.
change: "change 0.5 s",.
willChange: "change",.
}}
><> .
<< canvas.
design= {{setting: "repaired", top: 0, left: 0, overview: "none"}}
ref= {canvasRef}
className=" webgl"
><> .
<.
);.
};.

export default MyCanvas;.

I attempted utilizing both ref and also useState hook and also neither jobs. This is the line loadingBarRef.current.style.transform='scaleX($ {progressRatio} )'; where I am attempting to change my css to reveal a basic progression bar