CSS Progress Bar Like IOS Devices | Loading Bar Animation In Pure CSS

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.

Style.css

Now create a file named style.css  to create the effect, and copy these codes given below.

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.