Skip to content

Instantly share code, notes, and snippets.

@M-Yankov

M-Yankov/LoaderBootstrap.html

Created November 26, 2017 23:16
Show Gist options
  • Save M-Yankov/2951e551c5a8ad9145107ca840f06600 to your computer and use it in GitHub Desktop.
Save M-Yankov/2951e551c5a8ad9145107ca840f06600 to your computer and use it in GitHub Desktop.
Download ZIP
Width loader
Raw
LoaderBootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
.fixed-top.nav-bar-loader, .nav-bar-loader {
display: block;
padding: 0 0 0 0;
top: 5px;
z-index: 12;
}
/* .width-33 {
width: 33%;
} */
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light nav-bar-loader" id="nav-bar-loader">
<a class="navbar-brand" href="#">&nbsp;</a>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated width-33" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</nav>
<div class="jumbotron">
<p>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque aperiam maxime veritatis libero, molestias tempore eligendi fuga maiores quibusdam ipsam ad qui eius eveniet iste officiis cum atque. Facere, est!</span>
<span>Totam autem blanditiis, fuga enim harum quo. Maiores quibusdam eum vitae explicabo quaerat suscipit optio sint illo sapiente pariatur, dolor similique praesentium provident. Nesciunt unde quasi velit cum officiis aut.</span>
<span>Commodi ratione deserunt optio enim expedita repellendus alias voluptas facilis repudiandae at eligendi, quia quasi ut reiciendis fugiat consectetur sint eos fugit accusantium unde perferendis? Nobis tenetur hic harum quam!</span>
<span>Nam minima doloribus mollitia qui ea doloremque impedit repudiandae eveniet, cupiditate necessitatibus sit alias et temporibus voluptatem ipsum corporis nemo explicabo blanditiis? Earum fugiat, necessitatibus velit perferendis saepe commodi praesentium.</span>
<span>Iusto, animi. Hic aut culpa repudiandae velit dolorem ab impedit blanditiis, totam, esse tempore numquam, nisi voluptates. Quisquam doloremque voluptate nihil amet, aut nam beatae explicabo dolorum itaque, debitis dignissimos.</span>
<span>Provident assumenda veniam laboriosam totam? Sunt repellat quaerat qui reprehenderit recusandae vel error ipsam blanditiis incidunt nostrum, totam nemo facilis facere, nobis odit temporibus necessitatibus excepturi repudiandae, earum laudantium ex.</span>
<span>Id numquam commodi quam debitis magnam itaque qui doloribus facere. Mollitia error accusantium unde iure consequatur cupiditate est esse corporis similique repellendus illo assumenda id dignissimos, commodi harum? Nulla, non.</span>
<span>Sed possimus reprehenderit fuga a temporibus aspernatur, illo illum, rem doloribus corrupti eligendi provident eaque excepturi ratione qui porro iusto. Impedit fugit laboriosam officiis molestias perspiciatis repudiandae at rem quos?</span>
<span>Inventore assumenda, ut modi quas eos omnis magnam consequatur quod commodi nisi deserunt unde veritatis! Debitis maiores, iste alias quisquam aut consectetur. Eveniet pariatur dicta ab mollitia nisi. Laboriosam, vitae?</span>
<span>Voluptate iure aliquam vero, asperiores aut fugiat accusamus voluptatum temporibus beatae voluptatem. Fuga, odit? Incidunt veritatis hic deleniti fugiat perspiciatis delectus tempora excepturi nam omnis, atque, distinctio officia. Necessitatibus, ab.</span>
<span>Cumque laudantium nostrum minima quasi ullam nemo mollitia asperiores voluptas neque. Dolor autem possimus qui eos ea nostrum, voluptates totam explicabo? Dolorem nemo illum tempore veniam inventore aliquam quidem velit?</span>
<span>Ipsa sed doloribus tenetur id excepturi necessitatibus voluptatum reprehenderit debitis vitae magni dolorum officiis, reiciendis natus, molestias nisi nam repellat, esse odio. Perferendis magni vitae quasi repellat pariatur, suscipit mollitia?</span>
<span>Perspiciatis voluptatum assumenda omnis molestiae sunt cumque distinctio quod optio. Ipsum aliquam sit ab placeat facere vero saepe. Sed quasi ad itaque numquam dignissimos velit doloremque earum distinctio obcaecati omnis.</span>
<span>Similique laborum facere accusantium dignissimos quis, atque suscipit fuga tempore, culpa ratione ad dicta aut odit iure voluptatem maiores! Dignissimos aut error explicabo facere culpa. Facere minus qui eaque maiores.</span>
<span>Accusamus ad quod ratione quos id fuga perferendis amet ut asperiores eius pariatur quis aliquam blanditiis, magni quae! Autem fuga porro quia deleniti totam distinctio necessitatibus maiores alias corporis ea!</span>
<span>Quod aliquam quidem, rerum perspiciatis dolore porro totam amet, qui impedit magnam officia expedita ex laudantium recusandae nostrum dolores? Est non quis ullam temporibus obcaecati, recusandae omnis quo enim veniam!</span>
<span>Pariatur, quibusdam laborum inventore ratione provident libero ea iste praesentium earum nostrum ducimus mollitia fuga cumque vel rerum modi, doloremque, quaerat odio iure non neque hic consectetur distinctio? Iusto, dolorum.</span>
<span>Nostrum inventore veritatis vitae impedit blanditiis deleniti aliquid voluptates? Velit sed nemo magni blanditiis sunt, eveniet laborum, rerum harum non suscipit inventore a ab cumque? Excepturi, porro! Officiis, sed laboriosam.</span>
<span>Deleniti libero maxime ullam accusamus harum. Dolore vero perspiciatis, labore impedit nihil quo eum veniam ullam aliquid ipsam, mollitia laborum maxime non quam laudantium facilis, reprehenderit doloremque unde temporibus corrupti.</span>
<span>Nihil aspernatur nostrum quibusdam. Illo labore hic neque modi autem cumque quo. At, facilis, praesentium ratione magnam eius corporis iste sequi quo, officiis amet eaque quam consequuntur vero nesciunt recusandae?</span>
</p>
<p>
<span>Dolore repellendus doloribus asperiores consequatur tenetur commodi, hic eveniet sint dolorum quisquam! Fugit nemo neque illum numquam et, sapiente sit accusamus dolorum reprehenderit, harum cum suscipit eius cupiditate, earum animi.</span>
<span>Maiores recusandae provident perferendis culpa error, illo facilis! Perferendis reprehenderit tenetur quos iure sit aspernatur, exercitationem sapiente veniam repudiandae aliquid atque, quae possimus nemo harum eos consequatur ea autem. Veniam?</span>
<span>Commodi praesentium eum dolor, eveniet sunt qui autem consequatur ducimus accusantium modi cum pariatur sapiente ipsum voluptates delectus fugiat recusandae nesciunt distinctio perferendis corporis itaque, ab reiciendis facere ad. Est?</span>
<span>Saepe, placeat odit in molestiae eos consectetur error repellat soluta, quis commodi eius esse. Unde enim esse repellendus praesentium nulla architecto illo iste excepturi et sunt ducimus nemo, necessitatibus dolorum.</span>
<span>Porro ut dolores maiores nobis eligendi perspiciatis ipsam recusandae, cumque distinctio dicta animi fuga reprehenderit hic deserunt aut harum consequuntur. Labore quidem dolorem facere aut id odio beatae a autem.</span>
<span>Tempore quisquam minima numquam. Illum vitae nemo adipisci modi ipsam mollitia numquam facilis, iste porro voluptate vero reiciendis maiores, sit similique dicta temporibus. Dicta nobis unde, quaerat est hic qui.</span>
<span>Expedita, praesentium optio. Reiciendis ipsam magni nostrum cupiditate libero nulla pariatur atque voluptatibus molestias voluptas officiis, adipisci, nisi rem minus totam sint! Omnis minus dolores vitae ullam blanditiis. Deleniti, corporis!</span>
<span>Nobis fuga ipsum dolores quis maxime autem modi aliquid ratione debitis explicabo placeat, neque facilis sunt iusto praesentium eaque natus tempore in corrupti. Voluptates nobis quidem a dolorem velit enim.</span>
<span>Nesciunt dolorem, aliquid modi illum architecto blanditiis eius harum aut possimus voluptas facere fuga neque nobis nisi temporibus quidem quae a amet hic perferendis ut ex enim libero dolor. Rem.</span>
<span>Ducimus nulla praesentium excepturi, maxime quibusdam obcaecati culpa porro harum voluptas, ex non. Quisquam similique odit, laudantium nihil inventore deleniti labore hic autem dolorem dolores repellendus mollitia aut numquam nam.</span>
<span>Fuga officiis consequuntur nesciunt illum odio facere minima est aliquam obcaecati? Veritatis nostrum, vero ut earum mollitia suscipit beatae saepe! Autem rem tempora magnam magni, eius ipsa itaque nesciunt reiciendis!</span>
<span>Officia nemo perspiciatis ea ex ducimus distinctio reiciendis, sunt quidem dolorum architecto minima rem soluta quos praesentium amet repellat tempore eum temporibus? Debitis natus, cumque eum id nemo voluptate officiis.</span>
<span>Voluptatum quasi velit ut. Accusantium at odio expedita deserunt non minima alias rerum saepe, recusandae repellat. Quod dolores necessitatibus, dignissimos mollitia minima, est, hic vero nostrum dolorum culpa sit quia!</span>
<span>Incidunt, odio amet molestiae quisquam at aut maiores, tenetur cumque natus velit sequi. Voluptatem aliquam harum, deleniti a quo et odit magni tempore corrupti eum, distinctio soluta maxime repellendus voluptates!</span>
<span>Quasi quae ab accusantium corporis minus enim. Reiciendis, exercitationem nobis. Maiores totam esse architecto fugiat id amet vitae asperiores. Voluptates veritatis quisquam minima. Error illo voluptatum nihil iure voluptas vitae.</span>
<span>Sunt vitae odio ipsa magnam et optio sit qui repellat consequatur harum autem inventore dolor possimus consequuntur distinctio blanditiis sed, minima recusandae voluptatibus nobis fugit placeat? Quo facere porro deserunt?</span>
<span>Eveniet corrupti, praesentium labore, aspernatur nihil exercitationem animi numquam nemo et id distinctio cum delectus dolorum quo rerum libero suscipit natus consectetur est aliquid sint doloribus sapiente odit. Cumque, incidunt.</span>
<span>Doloremque repudiandae ab perferendis tenetur molestias? Minima vitae, asperiores esse accusantium maxime modi iusto, facere voluptatum ullam quisquam non. Esse quaerat sit fuga. Expedita, quia. Voluptatem velit quo unde nihil?</span>
<span>Eaque optio a explicabo sit maiores animi eligendi est quibusdam, delectus tempora rem, necessitatibus quas? Quo doloribus doloremque, repellat totam in minus officiis veritatis labore iste temporibus quod aut ducimus.</span>
<span>Enim beatae autem quod explicabo fuga cupiditate doloremque, modi eos dicta similique alias consequuntur iure animi, illum in ipsam eveniet maxime quis quo ipsum velit minima, excepturi sunt! Officiis, laboriosam.</span>
</p>
<p>
<span>Maiores voluptates animi natus voluptatum, consectetur illum labore repellat recusandae esse ipsa similique harum saepe eius accusantium exercitationem dolor quas placeat amet. Ipsa ipsam fugiat blanditiis, atque amet delectus dolores.</span>
<span>Veniam atque quibusdam quas libero nihil excepturi reiciendis hic, similique suscipit dicta totam odio. Architecto dolores laboriosam incidunt ab, impedit consequatur reiciendis nobis cum iusto nihil, illum cupiditate nemo pariatur?</span>
<span>Totam consequatur molestias optio iure aut. Expedita, recusandae laboriosam mollitia non aspernatur corrupti iusto exercitationem modi similique assumenda iure suscipit atque? Ipsum quis iste adipisci laboriosam numquam? Excepturi, officiis dignissimos.</span>
<span>Accusamus perspiciatis obcaecati itaque iusto exercitationem, non, voluptate, ipsam quas maiores ratione rem dignissimos necessitatibus! Enim tempore iure, fuga error molestiae, laudantium iusto consequuntur sunt nostrum voluptas tenetur voluptates eveniet.</span>
<span>Voluptatibus mollitia odio officiis quia ratione perferendis suscipit voluptatem quo cum quos omnis ex vitae enim deserunt excepturi distinctio saepe illum animi ullam iste molestias voluptatum consectetur, delectus labore? Beatae?</span>
<span>Sequi molestias culpa error? Aliquam explicabo sed consequuntur aut iusto tempore autem quas possimus cumque qui quibusdam, exercitationem, quisquam delectus ab! Velit ipsam minima quo nobis amet expedita accusamus maiores?</span>
<span>Amet rem quis, nesciunt architecto dolor obcaecati asperiores optio, culpa tempore provident aliquid illum fugit aspernatur velit necessitatibus, error exercitationem labore. Iste deserunt quia numquam aperiam qui culpa in dolorem.</span>
<span>Odio dicta et adipisci saepe explicabo, asperiores veritatis earum laboriosam provident accusamus voluptates dolorum officiis, impedit cum quae incidunt distinctio, alias a facilis possimus labore ipsum temporibus velit esse. Alias.</span>
<span>Saepe, consequatur officia earum quas neque reiciendis odit, nobis reprehenderit voluptatum sint quia quod, veritatis eaque necessitatibus. Minima maiores pariatur dolorem, eveniet placeat ad, alias ipsa non similique aliquam expedita!</span>
<span>Cupiditate veritatis id eaque non odit illo nihil dicta amet velit tenetur quidem molestiae mollitia, assumenda excepturi ex possimus blanditiis quisquam voluptate totam aliquid iusto! Voluptatibus similique aperiam repellat a.</span>
<span>Fugit, illum eligendi? Esse perspiciatis culpa quaerat adipisci mollitia laudantium corporis numquam iure nulla ad, nostrum optio voluptate consectetur eius, necessitatibus provident ut voluptatum! Velit mollitia architecto voluptatem eaque repudiandae.</span>
<span>Placeat unde dolore culpa, beatae nemo dicta. Perferendis recusandae aut praesentium dolor? Molestiae quibusdam ipsum sequi ullam sunt officiis in totam tempora delectus laudantium commodi reiciendis, ratione animi magnam eligendi.</span>
<span>Inventore ullam exercitationem vero consequatur vel, accusantium nulla minus saepe illum labore. Iure esse facilis sequi, nam, quasi alias ut a aperiam quibusdam laborum dolore in inventore nesciunt velit accusantium.</span>
<span>Eum eveniet adipisci excepturi pariatur! Iusto corrupti officia, quae ipsum recusandae, qui nulla et impedit aspernatur exercitationem, quos asperiores expedita. Mollitia nihil nostrum facilis ab iusto assumenda quia eius neque?</span>
<span>Quidem dicta obcaecati totam reiciendis nesciunt fugiat dolore consequatur perferendis? Id debitis in quis? Eveniet repellendus veniam recusandae, cumque animi quasi consectetur. Doloremque reiciendis pariatur vero at, excepturi nesciunt odio!</span>
<span>Tenetur nobis repellat, corporis praesentium officia veritatis, voluptatum dicta voluptas ipsum eaque dolore laudantium animi accusamus, perspiciatis architecto sunt vitae voluptatem commodi corrupti nihil esse! Amet sunt excepturi sequi vitae.</span>
<span>Temporibus id pariatur, illum nisi iure mollitia dolorem laboriosam atque facere totam excepturi, quae tenetur vero porro blanditiis explicabo nam dolores. Qui consequuntur cumque deserunt corporis provident quo quisquam rem.</span>
<span>Obcaecati sint aspernatur expedita! Optio eaque amet voluptate tempore ex laudantium! Hic minima eius modi aut. Dolore esse, ipsa reprehenderit sapiente temporibus vel beatae placeat, saepe nemo, ipsum ut sunt.</span>
<span>Pariatur itaque minus, aliquam nihil recusandae repellat alias perferendis dolorem exercitationem, fugiat voluptas natus odit eveniet accusamus quam laudantium distinctio! Fuga, qui suscipit debitis enim eum facere itaque architecto hic?</span>
<span>Doloremque, quibusdam hic! Sit vel voluptatum consequuntur delectus magnam dolorem quod cupiditate distinctio nam perferendis sequi id eaque laborum numquam, sunt molestiae eius minus fugiat nostrum doloremque dignissimos rerum! Ab.</span>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script >
function showLoad() {
$('.nav-bar-loader').removeAttr('hidden');
var candelToken = setInterval(function () {
var progress = $('.nav-bar-loader').find('.progress-bar')[0];
if (!progress) {
return;
}
width =parseInt(progress.style.width);
if (isNaN(width) || width >= 100) {
width = 0;
}
width += 5;
console.log($('.nav-bar-loader').find('.progress-bar'));
console.log(`new width: ${width + 1}`);
$('.nav-bar-loader').find('.progress-bar').width(width + '%');
}, 500)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment