Pure CSS Colourful Progress Bar Line for Blogs&Forums with Javascript

Hello Guys, today after a long time am back here with a much useful article for Bloggers. Sorry for my absence, i am too busy with my projects now. So now coming to the point, i’ve decided to share an inportant graphical user interface loding bar codings for all bloggers. You may have seen this bar in Youtube many times. But this is better then youtube loading bas because of its multicolour transparency.

Lets read it out in details.. 😉

What is Progress bar?

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. Below are some examples of Progress bar images: 
Circular Progress Bar

Flat Horizontal Progress Bar

Only visible to Desktop users

How To Add Progress Bar in Your Blogs?

Step 1: Login to Blogger

Step 2: Click on Theme

Step 3: Click on Edit HTML

Step 4: Now search this </head> and paste the below code above it.
https://gist.github.com/sunmughan/081351de591424e43a5a45162b39970b.js

Step 5: Now Copy the below Javascript code and paste it above </body>
https://gist.github.com/sunmughan/a5b70128a16b4a3c5cc527379d743ed0.js

Step 6: Now copy the below code and paste it below </nav>
https://gist.github.com/sunmughan/b29021901677c4e9d0a1a06d087f7d72.js

Step 7: Save your Theme now and see the changes!

Final Words

So this was the article on Youtube like colourful Progress Bar For Blogs and Websites. I hope you love this article. Share this article with your friends and do let them know about this amazing blogging tips and I hope they will love it and love to install it on their Blogs.

Thank you for visiting Droidadda and keep visiting for more tips and tricks like this and I will meet you in the next article. Till then stay peace.

via Blogger http://www.droidadda.org/2017/06/css-progress-bar.html https://mtkdr0id.files.wordpress.com/2017/06/417eb-screenshot2b25281172529.png?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s