FULL SCREEN LOADING SPINNER WITH HTML & CSS

[{"selector":"#anim-6e4d6006-bb1e-49df-8813-aa36128bbb84","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0b688f8b-6229-4491-a30e-b045227d7644","keyframes":{"transform":["translate3d(0px, 167.68890%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-57b4aee2-37a1-4f9e-8c48-72187bab5741","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1ac7c56e-7563-4195-93b5-0db73e36686c","keyframes":{"transform":["translate3d(0px, -763.49209%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

LOADING SPINNER HTML

[{"selector":"#anim-87a5d7c6-7621-4f14-82b5-e50c10e017c2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14ce8311-35d5-4be5-859c-6cdb3f3bda02","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-d194087c-d182-470c-a3e4-f57ea12ee80e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-caca5146-2b20-46cd-bbc0-7a3198124b70","keyframes":{"transform":["translate3d(0px, 1301.05766%, 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 01

SPINNER CSS (PART 1)

[{"selector":"#anim-dc65ee42-cda4-480c-bef5-e10959e3cc04","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09e34ea0-a6aa-4107-9126-ed4facd12c98","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-d0020b20-dcf4-49c6-b4c7-eb1da6ec6e06","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20cd2e49-c54d-43c8-bd7a-59a6e2d932a9","keyframes":{"transform":["translate3d(-115.06411%, 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; } 02 CENTER LOADING SPINNER #spinner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%); }

SPINNER CSS (PART 2)

[{"selector":"#anim-9f665f05-d02b-4346-b881-618dcf4cd861","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; } 03

JAVASCRIPT TOGGLE

[{"selector":"#anim-6af8d55e-9ada-4f9e-be4c-cdb67608810d","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-96495c9e-0641-44f9-98ab-60d3e3dc2ab9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05d6578d-46f7-4075-976a-b34adde6f24c","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"); } 04

FULL TUTORIAL

[{"selector":"#anim-bb7ff8b5-1757-42fd-80fc-0efe0a88efe6","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-2ee5510e-b2b7-48e7-818a-7d212fb97ef3","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-18356fae-b9a6-4a92-bb62-cb94c909cd59","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 SCREEN LOADING SPINNER WITH HTML & CSS

LOADING SPINNER HTML

SPINNER CSS (PART 1)

SPINNER CSS (PART 2)

JAVASCRIPT TOGGLE

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST