create loader using css

Question

I am trying to create a loader for my website using css and javascript and it has to look something like

so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.

Edit- Sorry if was not clear but I want the orange slider as an animated loader

HTML -

 <div style="margin-left:400px; margin-right:400px " class="progress-wrap progress" data-progress-percent="20"> <div class="progress-bar progress"></div> </div>

CSS -

@import "compass/css3"; .red{ background:black; margin-left:300px; top:100px; } .box{ width:100px !important; height:100px !important; z-index:-1; } .progress { width: 100%; height: 10px; } .progress-wrap { background: #f80; margin: 200px 0; overflow: hidden; position: relative; .progress-bar { background: white; left: 0; position: absolute; top: 0; } }

Javascript-

moveProgressBar(); $(window).load(function() { moveProgressBar(); }); function moveProgressBar() { console.log("moveProgressBar"); var getPercent = ($('.progress-wrap').data('progress-percent') / 100); var getProgressWrapWidth = $('.progress-wrap').width(); var progressTotal = getPercent * getProgressWrapWidth; var animationLength = 6500; $('.progress-bar').stop().animate({ left: progressTotal }, animationLength); }

as you can see in the picture behind the progress bar there are two boxes I am unable to place the boxes behind the progress bar — dj43
– dj43, Commented Jul 23, 2018 at 17:51

wdm · Accepted Answer · 2018-07-23 19:58:27Z

So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?

One solution is to set the progress bar to position: absolute and position it over the boxes.

As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.

Live demo: http://jsfiddle.net/rg0bq23p/45/

Javascript

var progress = document.getElementById('progress'); var bar = progress.querySelector('.bar'); bar.style.width = progress.dataset.progress + '%';

HTML

<div class="wrapper"> <div id="progress" class="progress" data-progress="20"> <div class="bar"></div> </div> <div class="box dark-gray"></div> <div class="box gray"></div> </div>

SCSS

.wrapper { width: 400px; margin: 0 auto; display: flex; position: relative; .progress { position: absolute; top: 150px; left: -100px; z-index: 1; width: 90%; background-color: #fff3e2; .bar { width: 0; height: 15px; background-color: #ffa41c; transition: width 1s; } } .box { width: 200px; height: 200px; &.gray { background-color: #bbb; } &.dark-gray { background-color: #888; } } }

your way works perfectly for only css but now i have no idea how to work with js for animation. If you can help it will be great.
@user678413 Updated wdm's answer with jquery animation: jsfiddle.net/rg0bq23p/40
@user678413 I've updated the answer to include updating the width of the progress bar with vanilla javascript along with a CSS transition to handle the animation.

Husam Ebish · Accepted Answer · 2018-07-23 19:10:15Z

I solved the problem using only HTML and CSS:

The result will be exactly as you want in the example you mentioned

.main{ float: right; } .box{ position: relative; } .bar{ position: absolute; top: 105px; right: 111px; } .left{ width: 143px; height: 143px; background: #595d59; display: inline-block; margin-right: -2px; } .right{ width: 143px; height: 143px; background: #b8b9b8; display: inline-block; margin-left: -2px; } .progress-bar{ width: 268px; height: 11px; background: #f26522; }

<!DOCTYPE html> <html lang="ru" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main" > <div class="box"> <div class ="left"></div> <div class ="right"></div> </div> <div class="bar"> <div class="progress-bar"></div> </div> </div> </body> </html>

Unmitigated · Accepted Answer · 2018-07-23 20:37:55Z

For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.

.main{ float: right; } .box{ position: relative; } .bar{ position: absolute; top: 105px; right: 111px; width: 100%; border: 1px solid black; } .left{ width: 143px; height: 143px; background: #595d59; display: inline-block; margin-right: -2px; } .right{ width: 143px; height: 143px; background: #b8b9b8; display: inline-block; margin-left: -2px; } .progress-bar{ width: 5%; height: 11px; background: #f26522; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="ru" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main" > <div class="box"> <div class ="left"></div> <div class ="right"></div> </div> <div class="bar"> <div class="progress-bar"></div> </div> </div> <script> var width = 5; var progress; progress=	setInterval(function(){	$('.progress-bar').css("width", width + "%"); width += 5; if(width>=105){	clearInterval(progress); } }, 200); </script> </body> </html>

JSFiddle: http://jsfiddle.net/21jdo8q7/1/

Collectives™ on Stack Overflow

create loader using css

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions