Loadless is a javascipt library that allows you to make reactive SinglePage Applications without ever reloading the page

• Create pages that do not load or refresh the page without writing any javascript code.
• Modals and popups that normally require DOM manipulation can now be created very easily, right in HTML.
• Use transitions and animations to load pages without writing CSS.
• Loadless can be customized to meet your needs.
• Easy setup: you just need to add 2 CDN links (one optional CSS animations file).

Add this script tag in your HTML's header (make sure to defer it)

<script src="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/loadless.min.js" defer></script>

If you want to make the best out of loadless, link this CSS cdn. It's optional though and the library would work even without it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css">

So basically to let the javascript code know what is a page and what is not, you need to give the page an attribute

data-page = "number or word here"

data-loadless-btn="value of the page"

The parent div needs to have the data-loadless-parent attribute

Here is some demo code to help you get started

  <!--  Href is given so that the page jumps to the link  -->
  <a data-loadless-btn="1" href="#hello">Click here to say Hello</a> <br>
    <a data-loadless-btn="two" href="#world">Click here to say world</a>

    <div data-loadless-parent>
        <!--  When Hello is visible, world will be hidden  -->
        <div id="hello" data-page="1" data-animate="left">
            Hello
        </div>
       <!-- add data-animate to animate. you can also add your own CSS file with animations starting with `animate-name` -->
        <div id="world" data-page="two" data-animate="left fadein">
            World
        </div>
       <!-- This is the div that won't disappear -->
        <div>
            another div 
        </div>
    </div>

To add animations just link the CDN provided at the top and write the animation name in the data-animate attribute. Have a look at animations available

• top
• left
• bottom
• right
• fadein

Readme made with 💖 using README Generator by Dhravya Shah