FULL SCREEN LOADING SPINNER

[{"selector":"#anim-6e62b525-f0b0-401b-88f3-08113a6cb660","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-73b8a437-9448-42c5-bb1e-c6ad24f6c987","keyframes":{"transform":["translate3d(0px, 136.84806%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9bfaa2c0-d300-460a-be8f-f733b74b70a3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a78c11de-77b1-494f-b5f0-bc5184e8ecad","keyframes":{"transform":["translate3d(0px, -1326.34923%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5337288a-45e7-46a8-8ed3-4c0da800d45e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c25cb587-7392-4ba1-804e-0bb786434864","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (quick & simple example)

LOADING SPINNER HTML

[{"selector":"#anim-b142c49c-1210-436a-bc03-ab320f95d46d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4feacad1-3209-4caa-9429-c00104c7bf5b","keyframes":{"transform":["translate3d(-115.45741%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09d1e76c-b4a0-445e-a718-9b3a0af9026c","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-68b4b759-b85b-4688-b06a-f4c30770287b","keyframes":{"transform":["translate3d(-116.98718%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"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

SPINNER CSS (PART 1)

[{"selector":"#anim-153f5bb6-1e78-4b79-ad35-eb2b8c68d8a3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-43a652c3-ee92-43b8-a5ef-ce8938a2626f","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-7ad4168f-28ac-4975-89cd-3dc7fa590933","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-de873202-97b6-4aa8-a97e-dd9be8f13c05","keyframes":{"transform":["translate3d(116.34615%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] #spinner { COVER FULL SCREEN position: fixed; top: 0; left: 0; z-index: 9999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); transition: opacity 0.2s; CENTER SPINNER display: flex; align-items: center; justify-content: center; }

SPINNER CSS (PART 2)

[{"selector":"#anim-e0861b6c-321f-4336-8043-e7bf7d78db05","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93d493bd-3130-4cab-a37c-04e597b436b6","keyframes":{"transform":["translate3d(-116.24204%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3c097d43-74bd-4c26-b18a-97635aa2fdc2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-01c658f0-fb7c-491a-93ee-73ebde7fc731","keyframes":{"transform":["translate3d(114.96816%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HIDE BY DEFAULT #spinner { visibility: hidden; opacity: 0; } SHOW SPINNER #spinner.show { visibility: visible; opacity: 1; }

JAVASCRIPT TOGGLE

[{"selector":"#anim-1adfa36e-4f84-44c4-bbea-a65cf8729ba1","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-cda3f907-eeb8-4987-bfb2-29241065aa2b","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-d99246e5-1bf8-42e3-b9a2-27bb024310df","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-ec658659-fcfa-4cb6-9361-3350b90c4627","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] function show () { document.getElementById("spinner") .classList.add("show"); } function hide () { document.getElementById("spinner") .classList.remove("show"); }

VISIT & FOLLOW

[{"selector":"#anim-af89ba34-b43a-47c6-b452-265875a0ccbe","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f51276c-acbd-4863-9fe9-74dd1fd28639","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-16c66077-9a8a-4957-8adc-5f70fb75ca29","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b3d29b0e-1b00-4f7f-a93d-9f84dd9c1f58","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-07414849-3f23-4a1e-9798-d863efb08059","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a6e9fc1e-5812-4413-a39c-2a726aa6f0d3","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-59d5b530-3df5-4301-a7a6-bdd301f09c2a","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-424dca08-8f34-4033-b9ac-f93640cdaab0","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-83c3abe1-ce51-47fd-9bd1-58b93eedc040","keyframes":{"transform":["translate3d(-170.2941%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-701c40b1-05c7-4569-aaaa-8bba46e68597 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

FULL SCREEN LOADING SPINNER

LOADING SPINNER HTML

01

SPINNER CSS (PART 1)

02

SPINNER CSS (PART 2)

03

JAVASCRIPT TOGGLE

04

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL