Loading Bar

Developer
Jarad Light
Size
2,333 Kb
Views
18,207

How do I make an loading bar?

Messing around with loading bar stuff.. What is a loading bar? How do you make a loading bar? This script and codes were developed by Jarad Light on 09 October 2022, Sunday.

Loading Bar Previews
IQ Test

Loading Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="reset">Reset</div> <div class="outer"> <div class="inner"></div> </div> <div id="measure"></div>
</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>

Loading Bar - Script Codes CSS Codes

body { background: #111;
}
#container { width: 400px; margin: 0px auto;
}
.outer { margin: 20px 0; height: 10px; background: #333; padding: 3px; border-radius: 5px;
}
.inner { width: 0px; height: 100%; border-radius: 3px; background: #f11; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px rgba(0, 0, 0, 0.7) inset;
}
#reset { padding: 10px; background: #d22; color: white; text-align: center;
}

Loading Bar - Script Codes JS Codes

loading = false;
$("#reset").click(function(){ loading = true; $(".inner").css("width",0);
});
window.setInterval(function(){ if(loading){ increaseBar(); }
}, 10);
function increaseBar(){ var wInner = $('.inner').width(); var wOuter = $('.outer').width(); wInner++; if(wInner < wOuter){ $(".inner").css("width",wInner); //} } else { loading = false; }
}
Loading Bar - Script Codes
Loading Bar - Script Codes
Home Page Home
Developer Jarad Light
Username jaradlight
Uploaded October 09, 2022
Rating 3
Size 2,333 Kb
Views 18,207
Do you need developer help for Loading Bar?

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!

Jarad Light (jaradlight) Script Codes
Name
Map Location Hover demo
RPG Tool
Simple Menu
A Pen by Jarad Light
Input File behaviours
Animated Checkboxes
Dropdown styles
Sass Placeholder Stuff
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!