Fake CSS Loader

Developer
Jesper Hills
Size
2,791 Kb
Views
24,288
  1. Fake CSS Loader Previews
  2. Fake CSS Loader HTML Codes
  3. Fake CSS Loader CSS Codes
  4. Fake CSS Loader JS Codes

How do I make an fake css loader?

What is a fake css loader? How do you make a fake css loader? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.

Fake CSS Loader Previews
IQ Test

Fake CSS Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fake CSS Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { height: 100%; position: relative;
}
.section { width: 100%; height: 100%; position: relative;
}
p { position: absolute; width: 100%; text-align: center; font: 40px/60px Arial; color: #fff; height: 60px; top: 50%; margin-top: -30px; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.intro { background: #ccc }
.content { background: #e74c3c }
.loader { position: relative; display: block; margin: 0 auto; width: 150px; top: 65%;
}
.loader .bar { display: block; background: #bbb; height: 10px; border-radius: 5px; box-shadow: inset 1px 1px 0px #999, 1px 1px 0 #ddd; overflow: hidden;
}
.loader .bar i { display: block; background: #e74c3c; height: 10px; width: 0px; box-shadow: inset 1px 1px 0 #c0392b; border-radius: 5px; transition: width 1s linear; transition-delay: 1s;
}
.loader .tick { display: block; position: absolute; left: 100%; top: 15px; margin: -7px 0 0 7px; text-align: center; font-size: 20px; color: #e74c3c; opacity: 0; transition: opacity 0.25s, top 0.25s; transition-delay: 2s;
}
.bar i.run { width: 100%;
}
.tick.run { top: 0; opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="section intro"> <p>Introduction</p> <div class="loader"> <span class="bar"> <i class="animate"></i> </span> <span class="tick animate">&#10004;</span> </div>
</div>
<div class="section content"> <p>Content</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fake CSS Loader - Script Codes CSS Codes

body, html { height: 100%; position: relative;
}
.section { width: 100%; height: 100%; position: relative;
}
p { position: absolute; width: 100%; text-align: center; font: 40px/60px Arial; color: #fff; height: 60px; top: 50%; margin-top: -30px; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.intro { background: #ccc }
.content { background: #e74c3c }
.loader { position: relative; display: block; margin: 0 auto; width: 150px; top: 65%;
}
.loader .bar { display: block; background: #bbb; height: 10px; border-radius: 5px; box-shadow: inset 1px 1px 0px #999, 1px 1px 0 #ddd; overflow: hidden;
}
.loader .bar i { display: block; background: #e74c3c; height: 10px; width: 0px; box-shadow: inset 1px 1px 0 #c0392b; border-radius: 5px; transition: width 1s linear; transition-delay: 1s;
}
.loader .tick { display: block; position: absolute; left: 100%; top: 15px; margin: -7px 0 0 7px; text-align: center; font-size: 20px; color: #e74c3c; opacity: 0; transition: opacity 0.25s, top 0.25s; transition-delay: 2s;
}
.bar i.run { width: 100%;
}
.tick.run { top: 0; opacity: 1;
}

Fake CSS Loader - Script Codes JS Codes

function fakeLoad(){ var animate = $(".animate").addClass("run"); var distance = $(".content").offset().top; var timer = setTimeout(function(){ $(".loader").fadeOut(250); $('html,body').animate({ scrollTop: distance }, 500); }, 3000);
}
$(document).ready(function(){ fakeLoad();
});
Fake CSS Loader - Script Codes
Fake CSS Loader - Script Codes
Home Page Home
Developer Jesper Hills
Username nopr
Uploaded October 13, 2022
Rating 4.5
Size 2,791 Kb
Views 24,288
Do you need developer help for Fake CSS Loader?

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!

Jesper Hills (nopr) Script Codes
Name
CSS 3D Carousel
Click-activated fluid width slider
CSS Fab Ice Cream
Vertically rotating text with CSS
Smooth click-activated slider
CSS Radar, variable speed
Mouseover carousel with indicator
Hidden Search
Mobile UI Concept
DRY-BEM with SCSS
Create amazing Facebook ads 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!