Loading Bar

Developer
Jarad Light
Size
2,333 Kb
Views
18,216
  1. Loading Bar Previews
  2. Loading Bar HTML Codes
  3. Loading Bar CSS Codes
  4. Loading Bar JS Codes

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,216
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
Simple Menu
RPG Tool
Map Location Hover demo
A Pen by Jarad Light
Input File behaviours
Dropdown styles
Sass Placeholder Stuff
Animated Checkboxes
Create amazing captions 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!