Lödr is a JavaScript API for using load screens in your browser apps! It requires zero dependencies and has a minimal footprint. Simply include it in your website and start using load screens today!
Lödr is a JavaScript API for using load screens in your browser apps! It requires zero dependencies and has a minimal footprint. Simply include it in your website and start using load screens today!
Lödr is a super lightweight JavaScript API for adding boot loader screens to your websites. You simply include a single .js file to get started. Once you've done that, you can use Lödr's three functions to configure and display a loading screen like the one you see on this site.
Boot loader screens are commonly seen on video games to signify who created them or what engines they used in development. We at LugoCorp decided they would look good on websites too. So we created this tiny JS library to make our idea a reality.
There are only 3 functions in Lödr's API:
This function increments the library's expectation for resource loading. You call this function to increase the number of loading steps that the library expects by x, or 1 if x is undefined.
This function configures the loading screen and displays it. You should call it after you've made all your lodr.goalpost() calls, but before any lodr.progress() calls. The config parameter is an object that is detailed below.
This function increments the number of loaded resources in the library. You call it to tell the load screen how far along your progress is. The number of loaded steps gets incremented by x, or 1 if x is undefined.
The lodr.load(config) function takes a single object parameter that defines how your load screen will look. The fields of the config object are detailed here:
text: (int) => string - text is a function that controls what text gets rendered based on the loading progress as a percentage (a number between 0 and 100)
image: string - the src of an image to put on the loader screen
background: string - sets the CSS background-color property for the background of the loader screen
fontFamily: string - sets the CSS font-family property for the loader screen
fontWeight: string - sets the CSS font-weight property for the loader screen
fontSize: string - sets the CSS font-size property for the loader screen
color: string - sets the CSS color property for the loader screen
mode: string - sets the mode for the boot screen (text for some loading message and bar for a progress bar)
