Full Screen Loading Spinner With Pure HTML CSS

[{"selector":"#anim-6d8f71c3-c8b0-4d73-adaf-51e615339264","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-43a1fdf6-5d11-4b8d-8aff-ef6fc1cc3c5a","keyframes":{"transform":["translate3d(0px, 176.88890%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75dc10a3-cb75-477f-8af3-4a1df6dc573f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d8103cf1-d84d-4d0a-905d-9462c38b8bc8","keyframes":{"transform":["translate3d(0px, -760.63499%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS FULL SCREEN LOADING SPINNER WITH HTML & CSS

[{"selector":"#anim-d7726468-882b-4d43-983a-ec8ef927c20a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c0c3c732-997f-40a0-a3ed-39dcbfd1f07d","keyframes":{"transform":["translate3d(-118.53147%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4829e696-81e4-4ad0-8132-bedc32fd7864","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e3121c04-6b2a-4369-ae2c-3d06478e3377","keyframes":{"transform":["translate3d(0px, 1382.01003%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <div id="spinner"> <img src="ajax-loader.gif"/> </div> GENERATE YOUR OWN SPINNER LOADING SPINNER HTML 01

[{"selector":"#anim-adfb4179-3529-438c-9c00-b7d27096f5b3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c4ed594-b67b-464a-a5e5-f105cd7ba1ce","keyframes":{"transform":["translate3d(116.66665%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c4477ff6-3727-4236-a9b9-bc4654ed9d45","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7d091576-2255-4670-a553-3125a2cf3664","keyframes":{"transform":["translate3d(-115.38462%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] FULL SCREEN WRAPPER #spinner { position: fixed; top: 0; left: 0; z-index: 9999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); transition: opacity 0.2s; } SPINNER CSS (PART 1) 02 CENTER LOADING SPINNER #spinner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%); }

[{"selector":"#anim-03db1a13-1fd9-45e2-9123-c00816e6bf7a","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] HIDE BY DEFAULT #spinner { visibility: hidden; opacity: 0; } SHOW SPINNER #spinner.show { visibility: visible; opacity: 1; } SPINNER CSS (PART 2) 03

[{"selector":"#anim-49920eb1-6e0a-4914-bdbf-fd4c24eb7e57","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ddf354c2-c746-463b-af19-1467a1f4209c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-097caab1-d819-4c05-8517-e307a8fe6b4f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] function show () { document.getElementById("spinner") .classList.add("show"); } function hide () { document.getElementById("spinner") .classList.remove("show"); } JAVASCRIPT TOGGLE 04

[{"selector":"#anim-1d02f0c3-7f20-4a4d-9c64-449a24fb22b1","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-354314d4-15c3-4a44-add7-20f6d639e7b7","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-dcdee7b6-c4bf-475d-85e6-a1de5f3e7ce2","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] FULL TUTORIAL CODE BOXX YOUTUBE VISIT & FOLLOW CODE BOXX PINTEREST