Loader Example

Developer
Ash Blue
Size
3,637 Kb
Views
4,048
  1. Loader Example Previews
  2. Loader Example HTML Codes
  3. Loader Example CSS Codes
  4. Loader Example JS Codes

How do I make an loader example?

What is a loader example? How do you make a loader example? This script and codes were developed by Ash Blue on 28 January 2023, Saturday.

Loader Example Previews
IQ Test

Loader Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader Example</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.svg'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Loader Overlay</h1> <div class="debug"> <button id="show" class="btn btn-default">Show Loader</button> <button id="hide" class="btn btn-default">Hide Loader</button> </div> <div class="cp-loader"> <div class="inner-wrapper"> <div class="message-output"> <p class="message-output-inner"> Lorem Ipsum </p> <div class="progress"> <div class="progress-bar" class="animated infinite slideInLeft"></div> </div> </div> <div class="graphics"> <i class="fa fa-car car"></i> <i class="fa fa-tree tree-1"></i> <i class="fa fa-tree tree-2"></i> <i class="fa fa-tree tree-3"></i> <i class="fa fa-road road animated infinite pulse"></i> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loader Example - Script Codes CSS Codes

.cp-loader { position: absolute; background: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; top: 0; left: 0;
}
.cp-loader .inner-wrapper { width: 300px; height: 300px; background: #ccc; top: 50%; left: 50%; position: relative; margin-top: -150px; margin-left: -150px; padding: 20px; position: relative; overflow: hidden;
}
.cp-loader .graphics { z-index: 0;
}
.cp-loader .graphics * { position: absolute;
}
.cp-loader .graphics .road { bottom: -50px; left: 0px; font-size: 250px; width: 100%; text-align: center; color: #000;
}
.cp-loader .graphics .car { left: 0; top: 73px; width: 100%; text-align: center; color: #00aaff; font-size: 120px; z-index: 1;
}
.cp-loader .graphics .tree-1 { font-size: 100px; color: #007700; top: 80px; left: 10px;
}
.cp-loader .graphics .tree-2 { font-size: 140px; color: #007700; top: 70px; left: 220px;
}
.cp-loader .graphics .tree-3 { font-size: 60px; color: #007700; top: 30px; left: 70px;
}
.cp-loader .message-output { z-index: 1; text-align: center; position: absolute; width: 100%; bottom: 10px; left: 0; padding: 5px 20px; background: #fff; display: block; opacity: .9;
}
.cp-loader .message-output .progress { margin: 0; padding: 0;
}
.cp-loader .message-output .progress .progress-bar { animation-duration: 30s; animation-name: fill-width;
}
.cp-loader .message-output .message-output-inner { margin: 0; padding: 0;
}
.debug button { z-index: 999; position: relative;
}
@keyframes fill-width { 0% { width: 0%; } 100% { width: 100%; }
}

Loader Example - Script Codes JS Codes

(function($) { // How long it takes to fade from 0 to 1 opacity var fadeTime = 2000; var messages = { pointer: 0, messages: [ 'Reviewing your credit', 'Performing credit report inception', 'Wrangling chickens...' ], setPointer: function (index) { this.pointer = _.clamp(index, 0, this.messages.length - 1); }, nextMessage: function () { var message = this.messages[this.pointer]; if (this.pointer === this.messages.length - 1) { this.setPointer(0); } else { this.setPointer(this.pointer + 1); } return message; } }; // key value pairs for timeouts var timeouts = {}; var _events = { cycleMessage: function () { var $message = $(this); $message.html(messages.nextMessage()); $message.fadeTo(fadeTime, 1, function () { $message.fadeTo(fadeTime, 0, function () { _events.cycleMessage.apply(this); }); }); } }; $.fn.showLoader = function() { var $loader = $(this); var $message = $loader.find('.message-output-inner'); // Reset message pointer and start cycling $message.stop(); messages.setPointer(0); _events.cycleMessage.bind($message.get(0))(); $loader.show(); return this; }; $.fn.hideLoader = function () { var $loader = $(this); var $message = $loader.find('.message-output-inner'); $message.stop(); $loader.hide(); return this; }
}(jQuery));
// Debug
$('#show').click(function () { $('.cp-loader').showLoader();
});
$('#hide').click(function () { $('.cp-loader').hideLoader();
});
// Init
$('.cp-loader').showLoader();
Loader Example - Script Codes
Loader Example - Script Codes
Home Page Home
Developer Ash Blue
Username ashblue
Uploaded January 28, 2023
Rating 3
Size 3,637 Kb
Views 4,048
Do you need developer help for Loader Example?

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!

Ash Blue (ashblue) Script Codes
Name
JavaScript Anagram Algorithm Explanation
Pure CSS Responsive Modal
Responsive Gallery Grid Layout
A Pen by Ash Blue
Overflowing Gallery
HTML5 Canvas Text Wrap Test
HTML5 Canvas Scrollbar
JavaScript Anagram Generator Alpha
CSS Zoom Icon
Flow Chart Prototype
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!