Jason's Plugins For Carrd

Custom loader

A free Carrd plugin template to add a custom page loader to your Carrd sites. Add your own brand/logo as the loader.To view the custom loader, refresh this page.Tutorial here.

Jason's Plugins For Carrd logo

TUTORIAL

Here's a step-by-step walk-through on how to set up your single custom icon Carrd plugin:1. Download the custom loader plugin Carrd template from the download page.


2. Open the template, find the Embed element labelled "Custom loader plugin". Find the "Code" input field, and copy all the code.


3. Add (+) a new Embed element in your own Carrd site, paste the code in the "Code" input field. Remember to set the Embed element's Style to Hidden, Body End, and uncheck "Defer script tags".


4. Find the the code under the top section where it says:<script>
// ----------------------------------------------------------- //
// ✍️ Edit the constants below to edit the style of the loader ✍️ //



5. Edit the background color of the page when the loader is shown, the base color of the loader, and the part of the loader that spins. You can use RGBA or HEX color codes.const LOADER_BACKGROUND_COLOR = "rgba(255, 255, 255, 1)"
const SPINNER_BORDER = "5px solid rgba(228, 235, 245, 1)"
const SPINNER_BORDER_TOP_COLOR = "#d3b1b3"



6. Continue editing the code. Replace the value of SPINNER_WIDTH to change how big/wide you want the loader to be.const SPINNER_WIDTH = "50px"



8. Adjust the seconds of OVERLAY_TRANSITION if you want the fade in/out transition to be longer. For REMOVE_LOADER_DELAY, 5000 = 5 seconds. Adjust the 5000 if you want the loader to spin longer before your home page is shown.const OVERLAY_TRANSITION = "opacity 1.5s"
const REMOVE_LOADER_DELAY = 5000



9. To add your own custom image for the loader, upload your image (.svg, .gif, .png, .jpg) to your Carrd site in an unlinked Section - unlinked means it's published but you never linked it anywhere on the site. It can be named imageassets for example. Then find the ID of your uploaded image under the Image element's Settings. Then replace the ID image02 in the code with your Image element's ID:const loaderImage = document.getElementById('image02');
This code will detect the ID of the image and show the image as the loader image instead of the default spinner. If you skip this step, or hide your logo image (like set it's Visibility to Exclude), it will show the spinning loader instead.


10. Publish your Carrd site, and done!


🚨 SIDE-NOTE: Please do not touch any code below the section that says "Do not edit the code from here onwards below":// 🚨 DO NOT EDIT THE CODE BELOW HERE IF YOU ARE NOT FAMILIAR WITH JAVASCRIPT 🚨 //