ptl.js

PTL is an acronym from Pages Transition Loader. ptl.js is made with Vanilla JS or what we usually call Pure Javascript

Demo

See Here

How to use it?

1. Load the ptl.min.js script in your document.

Load via Local File

<script src="plt.min.js"></script>

Load via CDN

<script src="https://cdn.jsdelivr.net/gh/dyazincahya/ptl-js@main/ptl.min.js"></script>

2. Customize the loading indicator.

let settings = { 
  opacity: 0.9, 
  backgroundColor: "#FFFFFF", 
  color: "#333333", 
  strokeWidth: 10, 
  timeOnScreen: 100, 
  loadingAnimationSpeed: "1s", 
  loadingAnimationTimingFunction: "linear", 
  loadingAnimationIterationCount: "infinite", 
  loadingText: "Loading...", 
  loadingTextSize: "32px",
}

Detail information about the settings

Option	Default	Documentation
opacity	0.9	see more
backgroundColor	#FFFFFF	see more
color	#333333	see more
strokeWidth	10	see more
timeOnScreen	100 (milisecond)	see more
loadingAnimationSpeed	1s (second)	see more
loadingAnimationTimingFunction	linear	see more
loadingAnimationIterationCount	infinite	see more
loadingText	Loading...	just plain text
loadingTextSize	32px	see more

Credit :

This repo is a fork from https://www.cssscript.com/pages-transition-loader/

License

MIT License