Asset loading effects demo

Developer
Zach Saucier
Size
4,936 Kb
Views
32,384
  1. Asset loading effects demo Previews
  2. Asset loading effects demo HTML Codes
  3. Asset loading effects demo CSS Codes
  4. Asset loading effects demo JS Codes

How do I make an asset loading effects demo?

A demo of the basics of how my asset loading library works. To check out more demos, see the GitHub page: https://github.com/ZachSaucier/Asset-Loading-Effects. What is a asset loading effects demo? How do you make a asset loading effects demo? This script and codes were developed by Zach Saucier on 18 August 2022, Thursday.

Asset loading effects demo Previews
IQ Test

Asset loading effects demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Asset loading effects demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ale" data-ale-type="diagonal" data-ale-src="https://crossorigin.me/http://zachsaucier.com/images/grapes.jpg"></div>
<div class="centered"> <h2>Asset loading effects</h2> <p>For more loading effects, source code, and an article of how it works, check out <a href="https://github.com/ZachSaucier/Asset-Loading-Effects/tree/master">the GitHub page</a>.
</div> <script src='https://rawgit.com/ZachSaucier/Asset-Loading-Effects/master/js/progressbar.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Asset loading effects demo - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.ale { /* This sizes each asset element so that the width is 1.5 times bigger than the height. If changed, the positioning some sub elements will need to be changed as well. */ height: 0; padding-bottom: 66%; /* This part is for the effect itself */ background-size: cover; position: relative; overflow: hidden; /* Add a default fade in for every effect */ /* Make sure any SVG or ::before elements are above ::after elements */ /* The diagonal loader */
}
.ale::after { z-index: 0; content: ''; position: absolute; top: 0; width: 100%; height: 100%; background-color: inherit;
}
.ale.complete::after { opacity: 0; transition: 1s;
}
.ale > svg, .ale::before { z-index: 1;
}
.ale[data-ale-type="diagonal"] { color: white; /* Position the SVG loader diagonally */ /* Create each half to be separated in the animation */ /* Position the left side */ /* Position the right side */ /* Set the complete state for each part */
}
.ale[data-ale-type="diagonal"] > svg { position: absolute; top: 50%; width: 125%; -webkit-transform: translate(-10%, -50%) rotate(-33.333deg); transform: translate(-10%, -50%) rotate(-33.333deg);
}
.ale[data-ale-type="diagonal"]::after, .ale[data-ale-type="diagonal"]::before { content: ""; width: 125%; height: 100%; position: absolute; background: currentColor;
}
.ale[data-ale-type="diagonal"]::before { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-33.333deg); transform: rotate(-33.333deg);
}
.ale[data-ale-type="diagonal"]::after { right: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-33.333deg); transform: rotate(-33.333deg);
}
.ale[data-ale-type="diagonal"].complete { /* Fade out the SVG */ /* Slide out both sides */
}
.ale[data-ale-type="diagonal"].complete > svg { transition: 0.25s; opacity: 0;
}
.ale[data-ale-type="diagonal"].complete::before { transition: 1s; -webkit-transform: rotate(-33.333deg) translateY(-100%); transform: rotate(-33.333deg) translateY(-100%);
}
.ale[data-ale-type="diagonal"].complete::after { opacity: 1; transition: 1s; -webkit-transform: rotate(-33.333deg) translateY(100%); transform: rotate(-33.333deg) translateY(100%);
}
body { font-size: 18px; font-family: 'Open Sans', sans-serif;
}
.centered { margin: 0 auto; max-width: 900px; box-sizing: border-box; padding: 20px;
}

Asset loading effects demo - Script Codes JS Codes

// The elements that are the to be used for the asset
var assetElems = document.querySelectorAll(".ale"), urlCreator = window.URL || window.webkitURL; // For URL creator usage later
// Add the asset loading effect for each element
[].forEach.call(assetElems, loadAsset);
// Load the asset in the way specified by the data attribute
function loadAsset(elem) { // Determine which loader to create var progressBarElem = getProgressBarElem(), isVid = elem.getAttribute("data-ale-isVid") != undefined ? elem.getAttribute("data-ale-isVid") : false, assetLoc = elem.getAttribute("data-ale-src"); // Load the asset via XHR so that we can track the progress var req = new XMLHttpRequest(); // Attach the finished load listener req.onload = loadFinished; // Attach the progress listener req.onprogress = loading; // Actually make the request req.open('GET', assetLoc, true); req.responseType = 'blob'; // This must be after the open - FF can't handle do it before https://bugzilla.mozilla.org/show_bug.cgi?id=1110761 req.send(); // Determine which progress bar to use given the data attribute and return it function getProgressBarElem() { var type = elem.getAttribute("data-ale-type"); // Choose the progress bar type based on the lil-type if(type !== "diagonal") { console.log("A diagonal type was not given! Creating one anyway"); } else { var line = new ProgressBar.Line(elem); // Fix an IE issue line.svg.setAttribute("preserveAspectRatio", "xMinYMid"); return line; } } // Update the progress bar with the current value function loading(evt) { if (evt.lengthComputable) { // ProgressBar.js animates using 0.0-1.0 as a range, so we need the progress in terms of that progressBarElem.animate(evt.loaded / evt.total); } } // Remove the loader when it's done and show the image function loadFinished() { // Currently, if it's not a video it's an image if(!isVid) { // Create a URL for the given response var imgUrl = urlCreator.createObjectURL(req.response); // Set that URL as the background of the element given elem.style.backgroundImage = 'url(' + imgUrl + ')'; } else { var video = document.createElement('video'); video.controls = true; video.src = urlCreator.createObjectURL(req.response); elem.appendChild(video); // Append the video since we can't do a background-video } // Finish the animation progressBarElem.animate(1, function () { // Add the "complete" class to show it's done elem.classList.add("complete"); }); }
}
Asset loading effects demo - Script Codes
Asset loading effects demo - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 18, 2022
Rating 3.5
Size 4,936 Kb
Views 32,384
Do you need developer help for Asset loading effects demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zach Saucier (Zeaklous) Script Codes
Name
Yin-Yang CSS Image Animation
Circle Snake
Converting CSS Animations to Transitions
Simple p5.js music visualizer
Reversing CSS Rotation Smoothly on Hover
Responsive CSS bars
Pausing Transitions
Hipster date intro screen
Simple, flat contact form
Building Images
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!