CSS Progress Bar Like IOS Devices: Basically, It is a loading bar animation with pure CSS. You must have seen this effect in mac or ios devices, maybe I saw on iTunes. Also, many websites use this type of preloader on their loading screen. If you have a portfolio or other types of presentation website then this loading bar will be pretty cool on your website. If you have a blog then you don’t need to use this kind of preloaders.
This is a pure CSS program, without JavaScript. I have said a lot earlier too that you don’t have an idea of what you can do with CSS. I know CSS has the limit of 200-300 commands or property. But always remember one thing, there is no limit for creativity. There are also people who can make every kind of mockup in CSS. This is a very short & easy program completely built-in CSS and HTML. As you know HTML is the structure of any web page, without HTML you can’t create a web page.
CSS Property Used In This Progress Bar or Loading Bar
Let’s talk about this loading bar animation program: I created this effect with CSS animation property. I used CSS @keyframe property to give animation to this progress bar. Basically, I had created 2 divs. First one for the progress bar, the second one is for a shadow effect. First, I created the whole Progress bar and its shadow with colors. But I had put width of the progress bar and shadow gave 0%. After that, created a for @keyframe an animation effect.
In @keyframe property, I had added to{ width:100%; } command. Basically, This command is for giving 100% width to divs previously created with 0% width. Now run this keyframe animation with 6s ease-in-out forwards command. Now, progress bar animating 0% to 100% width in 6s. That is the secret behind this loading bar animation effect.
Let’s See a Preview Of This Loading Bar
You May Also Like: CSS Flip Effect On Hover | 3D Flip Effect With HTML & CSS
Pure CSS Progress Bar Like IOS Devices Source Code
If you have not understood anything yet, then you can understand the complete source code. Simply you have to create 2 files for this program. One for HTML file and another for CSS file.
Index.html
Create a file named index.html and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com) --> <html> <head> <meta charset="UTF-8"> <title>CSS Progress Bar | Loading Animation Like IOS</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:400,500'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h3>Loading, please wait.</h3> <div class="progress-bar"> <div class="shadow"></div> </div> </div> </body> </html> |
Style.css
Now create a file named style.css to create the effect, and copy these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/** code by webdevtrick ( https://webdevtrick.com) **/ * { margin:0px; padding:0px; box-sizing:border-box; font-family:"Raleway"; } .container { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:350px; height:100px; } .container h3 { color:rgba(100,100,100,0.9); } .container .progress-bar { width:0%; height:5px; background:linear-gradient(to right,rgb(76,217,105),rgb(90,200,250),rgb(0,132,255),rgb(52,170,220),rgb(88,86,217),rgb(255,45,83)); margin-top:10px; background-size:350px 5px; border-radius:10px; animation:loading 6s ease-in-out forwards; } .container .shadow { width:100%; height:40px; background:linear-gradient(to bottom,rgba(100,100,100,0.17),rgba(100,100,100,0.1),transparent); transform:skew(45deg) translate(15px,5px); } @keyframes loading { to { width:100%; } } |
That’s It. Now you have successfully created progress bar like IOS in CSS. If you have any doubt comment down below.
Thanks For Visiting, Keep Visiting.
Thanx for sharing this amazing progress bar code.
that’s my pleasure
How do i show this on top of every page when loading like amazon or google does.
hey use this script on you
section.https://docs.google.com/document/d/1yH9b0DffQAV_-4Dodw6tbECvDY6Bckq_EI7rfxskpb4/edit?usp=sharing
thanks but where to keep all these files .. my site is made on opencart . should place all these files in header.tpl ?
moreover sir i was seeing other tutorial ,my main questions is where to keep the files (html,css,js) in public_html or where?
Okay found a way to do it . thanks for your script. i would have been great if a reply was possible to previous question , anyway thanks!😄😄
Sorry bro, I had not checked your comment. use script in between
section. Maybe you will find in header.php file. For any question you can massage on facebook at – https://www.facebook.com/webdevtrick/