Percentage preloader

Developer
Siful Islam
Size
3,571 Kb
Views
4,048
  1. Percentage preloader Previews
  2. Percentage preloader HTML Codes
  3. Percentage preloader CSS Codes
  4. Percentage preloader JS Codes

How do I make an percentage preloader?

A percentage preloader jquery. Create a Loading Screen to preloader images and content for you website . . What is a percentage preloader? How do you make a percentage preloader? This script and codes were developed by Siful Islam on 30 January 2023, Monday.

Percentage preloader Previews
IQ Test

Percentage preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Percentage preloader </title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title> Percentage preloader</title> <!-- FAV AND TOUCH ICONS --> <link rel="icon" href="favicon.ico"> <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,500' rel='stylesheet' type='text/css'> <!-- BOOTSTRAP CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Animate CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
</head> <body> <!-- Preloader Start --> <div id="main-preloader" class="main-preloader semi-dark-background"> <div class="main-preloader-inner center"> <h1 class="preloader-percentage center"> <span class="preloader-percentage-text">0</span> <!-- Show Percentage Number --> <span class="percentage">%</span> </h1> <div class="preloader-bar-outer"> <div class="preloader-bar"></div> <!-- Percentage Precess Bar --> </div> </div> </div> <!-- Preloader Start --> <!-- Content Start --> <div class="container"> <div class="row"> <div class="content"> <div class="col-md-6"> <img src="http://lorempixel.com/585/400/transport/10/" alt=""> </div> <div class="col-md-6"> <h2> Heading Style one </h2> <p> Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.</p> <a href="">Read More . .</a> </div> </div> <div class="clearfix"></div> <div class="content"> <div class="col-md-6"> <h2> Heading Style Two </h2> <p> Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.</p> <a href="">Read More . .</a> </div> <div class="col-md-6"> <img src="http://lorempixel.com/585/400/transport/5/" alt=""> </div> </div> <div class="clearfix"></div> <div class="content"> <div class="col-md-6"> <img src="http://lorempixel.com/585/400/transport/7" alt=""> </div> <div class="col-md-6"> <h2> Heading Style Three </h2> <p> Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.</p> <a href="">Read More . .</a> </div> </div> <div class="clearfix"></div> <div class="content"> <div class="col-md-6"> <img src="http://lorempixel.com/585/400/cats/5/" alt=""> </div> <div class="col-md-6"> <img src="http://lorempixel.com/585/400/technics/6/" alt=""> </div> </div> <div class="clearfix"></div> <div class="content"> <h4>Avalable for hire or any enquery <a href="http://getsiful.com/#contact-form"> Lets chat </a> </h4> </div> </div> </div> </body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://getsiful.com/sPreloader.js'></script> <script src="js/index.js"></script>
</body>
</html>

Percentage preloader - Script Codes CSS Codes

 html * { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { margin: auto 0; padding: 0; text-align: center; font-family: "Work Sans", sans-serif; } .main-preloader { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999999999; background-color: #000; text-align: center; } .main-preloader .main-preloader-inner { position: absolute; top: 50%; width: 100%; } .main-preloader .preloader-percentage { color: #ffffff; margin: 0; } .main-preloader .preloader-percentage span { display: inline-block; float: center; font-size: 50px; } .blog-header { background-size: cover; text-align: center; margin-bottom: 50px; } .blog-overlay { background: rgba(0, 0, 0, 0.42); color: #fff; } .header-content{ padding: 100px 0; } .header-content img{ margin-top: 30px; } .header-content a{ padding: 20px 30px; color: #000; background: #fff; text-decoration: none; margin: 0 10px; font-size: 20px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; font-family: "Work Sans", sans-serif; border-radius: 2px; } .header-content a:hover { color: #5C55FD; box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32); -moz-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32); -webkit-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32); -o-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32); } .content { margin: 0 auto; margin-top: 30px; margin-bottom: 30px; } .content p { padding: 20px; } .preview{ display: inline-block; padding: 20px; margin-bottom: 20px; } .preview img { box-shadow: 0px 5px 20px 0px rgba(51,73,94,0.05); transition: all 400ms cubic-bezier(0.390, 0.500, 0.150, 1.360); } .preview a:hover img { box-shadow: 0px 20px 65px 0px rgba(51,73,94,0.15); } img { vertical-align: top; } h1 { text-align: center; font-family: "Work Sans", sans-serif; font-size: 36px; font-weight: 500; margin-bottom: 5px; color: #FFF; margin-top: 30px; margin-bottom: 60px; } .rating{ margin-top: 60px; } .rating img{ padding: 30px; } .copyright{ padding: 20px 0; } @media only screen and (max-width: 992px) { .preview { display: block; padding: 10px; } .preview img{ max-width:100%; height:auto; } .header-content a{ display: block; margin-bottom: 20px; } }

Percentage preloader - Script Codes JS Codes

 $('body').jpreLoader({ preMainSection: '#main-preloader', prePerText: '.preloader-percentage-text', preBar: '.preloader-bar', });
Percentage preloader - Script Codes
Percentage preloader - Script Codes
Home Page Home
Developer Siful Islam
Username sifulislam
Uploaded January 30, 2023
Rating 3
Size 3,571 Kb
Views 4,048
Do you need developer help for Percentage preloader?

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!

Siful Islam (sifulislam) Script Codes
Name
Google map search only
Animate a Border Below a Horizontal Nav Item from Left to Right
Material Contact Form
Gradient Background svg wave shape
Fullpage.js Overflow scrolling
Search bar width increase on click
A Pen by Siful Islam
E commerce product showing
Progress bar css
Reading Progress bar
Create amazing art & images 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!