Background transition progress bar

Developer
Ianchouinard
Size
4,243 Kb
Views
6,072
  1. Background transition progress bar Previews
  2. Background transition progress bar HTML Codes
  3. Background transition progress bar CSS Codes
  4. Background transition progress bar JS Codes

How do I make an background transition progress bar?

Made this for Vital Design's week three code challenge. Thought a progress bar animation like this could be cool for an app loading screen (a really slow loading one at least). . What is a background transition progress bar? How do you make a background transition progress bar? This script and codes were developed by Ianchouinard on 03 December 2022, Saturday.

Background transition progress bar Previews
IQ Test

Background transition progress bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background transition progress bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="wrapMeUp" class="none"> <span>works best in chrome</span> <div class="progressLand"> <div class="box"> <h1 class="text">Get ready for this!</h1> </div> <progress id="bar" value="0" max="100">0%</progress> <section id="info"> <p>My take on a prog bar that makes use of the full screen for Vital's week three code challenge.</p> </section> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Background transition progress bar - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
body { width: 100%; height: 100%; font-family: 'Montserrat', sans-serif;
}
#wrapMeUp { width: 100%; height: 100%; position: fixed; transition: background-color 750ms;
}
#wrapMeUp span { color: rgba(250, 250, 250, 0.4); padding: .5em;
}
progress::-webkit-progress-bar { background-color: rgba(250, 250, 250, 0.2); height: 30px; width: 400px;
}
progress::-webkit-progress-value { background-color: rgba(250, 250, 250, 0.2); background-image: linear-gradient(to right, rgba(250, 250, 250, 0.3), #fff); transition: width 750ms; border-right: 2px solid white;
}
progress { background: rgba(250, 250, 250, 0.2) !important; height: 30px; width: 400px;
}
progress::-moz-progress-bar { background-color: rgba(250, 250, 250, 0.2); background-image: linear-gradient(to right, rgba(250, 250, 250, 0.3), #fff); -moz-transition: width 750ms; border-right: 2px solid white;
}
h1 { text-align: center; margin-bottom: 1.5em; font-size: 2em; line-height: 160%;
}
.text { transition: margin 750ms;
}
.box { height: 45px; overflow: hidden; margin-bottom: 2em;
}
.progressLand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; padding: 5em; background-color: rgba(250, 250, 250, 0.025); border: 1px solid rgba(250, 250, 250, 0.3); border-radius: 2px;
}
@media screen and (max-width: 800px) { .progressLand { top: 0; left: 0; transform: translate(0, 0); margin-top: -50px; width: 100%; text-align: center; background-color: rgba(250, 250, 250, 0); border: none; padding: 5em 0 0 0; }
}
.none { background-color: #9F3F27;
}
.low { background-color: #D85A3B;
}
.one { background-color: #E48A25;
}
.two { background-color: #16D475;
}
.three { background-color: #1652D4;
}
.done { background-color: #3FBF3F;
}
#info { width: 325px; padding: .5em .25em; color: white; font-size: .9em; line-height: 150%; text-align: center; margin: 2em auto 0 auto; border: 2px dashed white;
}
progress, progress[role] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; background-size: auto; width: 400px; height: 30px;
}
progress[role]:after { background-image: none;
}
progress[role] strong { display: none;
}

Background transition progress bar - Script Codes JS Codes

$(document).ready(function() { function low() { $('#wrapMeUp').removeClass('none') .addClass('low'); $('.text').append("<br /> Blastin' Off"); $('.text').css("margin-top", "-55px"); }; function one() { $('#wrapMeUp').removeClass('low') .addClass('one'); $('.text').append("<br /> This is taking a while"); $('.text').css("margin-top", "-105px"); }; function two() { $('#wrapMeUp').removeClass('one') .addClass('two'); $('.text').append("<br /> Ughh!"); $('.text').css("margin-top", "-160px"); }; function three() { $('#wrapMeUp').removeClass('two') .addClass('three'); $('.text').append("<br /> Almost there..."); $('.text').css("margin-top", "-215px"); }; function done() { $('#wrapMeUp').removeClass('three') .addClass('done'); $('.text').append("<br /> Done!!!"); $('.text').css("margin-top", "-265px"); }; function clear() { $('.text').css("margin-top", "-325px"); }; function restart() { prog = 0; prog += 0; $('.text').css("margin-top", "0px"); $('.text').html("Get ready for this!"); $('#wrapMeUp').removeClass('done') .addClass('none'); }; prog = $('#bar').val(); function bars() { prog = prog += 1; $('#bar').val(prog); if (prog == 10) { low(); } else if (prog == 30) { one(); } else if (prog == 50) { two(); } else if (prog == 75) { three(); } else if (prog == 100) { done(); clearInterval(bars); setTimeout(clear, 900); setTimeout(restart, 1200); } }; setInterval(bars, 200);
});
Background transition progress bar - Script Codes
Background transition progress bar - Script Codes
Home Page Home
Developer Ianchouinard
Username ianchouinard
Uploaded December 03, 2022
Rating 3
Size 4,243 Kb
Views 6,072
Do you need developer help for Background transition progress 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!

Ianchouinard (ianchouinard) Script Codes
Name
Background expand on hover transition
A form.
IOS clock app icon
3d wordpress login
Animated Text Appearance
Simple Counter
3d css flip book
Smartwatch OS
Angular Mock Fantasy Football App
Scroll Bar Fix
Create amazing web content 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!