Loading

by Gryphonn

HTML

<div id="progressbar1"></div>
<button onclick="$('#progressbar1').LineProgressbar({percentage: 50});">Click me</button>

<script>
$(function() {
$('#progressbar1').LineProgressbar({
	percentage: 95,
	ShowProgressCount:	false,
	fillBackgroundColor: '#1abc9c',
	 radius: '8px'
});
});
</script>

CSS

/** Progressbar class css*/
.progressbar {
    width: 100%;
	margin-top: 5px;
	margin-bottom: 35px;
	position: relative;
	background-color: #EEEEEE;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

.proggress{
	height: 8px;
	width: 10px;
	background-color: #3498db;
}

.percentCount{
	float:right;
	margin-top: 10px;
	clear: both;
	font-weight: bold;
	font-family: Arial
}

JavaScript

/**
 * jQuery Line Progressbar
 * Author: KingRayhan<rayhan095@gmail.com>
 * Author URL: http://rayhan.info
 * Version: 1.0.0
 */
 

(function ($) {
    'use strict';


    $.fn.LineProgressbar = function (options) {

         options = $.extend({
            percentage: null,
            ShowProgressCount: true,
            duration: 1000,

            // Styling Options
            fillBackgroundColor: '#3498db',
            backgroundColor: '#EEEEEE',
            radius: '0px',
            height: '10px',
            width: '100%'
        }, options);

        $.options = options;
        return this.each(function (index, el) {
            // Markup
            $(el).html('<div class="progressbar"><div class="proggress"></div><div class="percentCount"></div></div>');



            var progressFill = $(el).find('.proggress');
            var progressBar = $(el).find('.progressbar');


            progressFill.css({
                backgroundColor: options.fillBackgroundColor,
                height: options.height,
                borderRadius: options.radius
            });
            progressBar.css({
                width: options.width,
                backgroundColor: options.backgroundColor,
                borderRadius: options.radius
            });

            // Progressing
            progressFill.animate(
                {
                    width: options.percentage + "%"
                },
                {
                    step: function (x) {
                        if (options.ShowProgressCount) {
                            $(el).find(".percentCount").text(Math.round(x) + "%");
                        }
                    },
                    duration: options.duration
                }
            );
            ////////////////////////////////////////////////////////////////////
        });
    }
    $.fn.progressTo = function (next) {

        let options = $.options;

        return this.each(function (index, el) {

           ...