matheuseduardo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Just a sample of code.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="script.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="barra-progresso">
      <div class="concluido"></div>
      <div class="percentual">
          <div class="numero">50</div>
          <div class="percent">%</div>
          <div class="texto">concluído</div>
      </div>
  </div>
  <br />
  <input type="number" name="progresso" id="progresso" value="50" min="0" max="100" step="10">
  <br />
  <button>atualiza progresso</button>
</body>
</html>

## script.js
$(function () {
    atualizaProgresso = function () {
        var percent = $('input[type=number]').val();
        var atual = $('#barra-progresso .concluido').data('p');

        percent = percent > 100 ? 100 : percent;

        mudaNumero(atual, percent);

        $('#barra-progresso .concluido').animate({
            height: percent + '%'
        }, {
            duration: 300,
            easing: "swing"
        });
        $('#barra-progresso .concluido').data('p', percent);
    };

    $('button').click(atualizaProgresso);
    $('#barra-progresso .concluido').data('p', 0);

    atualizaProgresso();
});

function mudaNumero(de, para) {
    if (typeof timer1 == "number") {
        clearInterval(timer1);
    }

    decimo = (para - de) / 10;
    para = parseInt(para, 10);
    de = parseInt(de, 10);

    vezes = 1;
    timer1 = window.setInterval(function () {
        if (vezes == 10) {
            clearInterval(timer1);
        }
        de = de + parseFloat(decimo, 10);
        $('#barra-progresso .percentual .numero').html(Math.round(de));
        vezes++;
    }, 30);
}

## style.css
html,body {
    font-family: Helvetica, 'Roboto Sans', Arial, sans-serif;
}
#barra-progresso {
    width: 234px;
    height: 335px;
    position: relative;
    font-family: Arial;
    font-weight: bold;
    top: 15px;
    left: 15px;
    background-color: #E4E4E4;
    background-image: url('http://i.imgur.com/L7QmZJB.png');
    background-position: bottom left;
    background-repeat: repeat-y;
}
#barra-progresso .concluido, #barra-progresso .percentual {
    position: absolute;
    width: 100%;
    bottom: 0px;
}
#barra-progresso .concluido {
    background-color: #009FE0;
    z-index: 100;
    background-image: url('http://i.imgur.com/sfbYNrO.png');
    background-position: bottom left;
    background-repeat: repeat-y;
}
#barra-progresso .percentual {
    z-index: 200;
    position: absolute;
    bottom: 15px;
    /* altura do numero referente a base */
    color: #fff;
    text-shadow: 1px 1px 1px #000, 1px 1px 8px rgba(0, 0, 0, 0.4);
}
#barra-progresso .percentual > div {
    position: absolute;
    bottom: 0px;
    line-height: 78%;
}
#barra-progresso .percentual .numero {
    font-size: 72px;
    vertical-align: bottom;
    letter-spacing: -0.1em;
    right: 50%;
    text-align: right;
}
#barra-progresso .percentual .percent {
    font-size: 35px;
    font-weight: normal;
    left: 120px;
    bottom: 20px;
}
#barra-progresso .percentual .texto {
    font-size: 16px;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    left: 120px;
    bottom: 2px;
}
input#progresso, button {
    font-family: inherit;
    font-size: 16px;
    margin-left: 15px
}
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="barra-progresso">
	<div class="concluido"></div>
	<div class="percentual">
	<div class="numero">50</div>
	<div class="percent">%</div>
	<div class="texto">concluído</div>
	</div>
	</div>
	<br />
	<input type="number" name="progresso" id="progresso" value="50" min="0" max="100" step="10">
	<br />
	<button>atualiza progresso</button>
	</body>
	</html>
	$(function () {
	atualizaProgresso = function () {
	var percent = $('input[type=number]').val();
	var atual = $('#barra-progresso .concluido').data('p');

	percent = percent > 100 ? 100 : percent;

	mudaNumero(atual, percent);

	$('#barra-progresso .concluido').animate({
	height: percent + '%'
	}, {
	duration: 300,
	easing: "swing"
	});
	$('#barra-progresso .concluido').data('p', percent);
	};

	$('button').click(atualizaProgresso);
	$('#barra-progresso .concluido').data('p', 0);

	atualizaProgresso();
	});

	function mudaNumero(de, para) {
	if (typeof timer1 == "number") {
	clearInterval(timer1);
	}

	decimo = (para - de) / 10;
	para = parseInt(para, 10);
	de = parseInt(de, 10);

	vezes = 1;
	timer1 = window.setInterval(function () {
	if (vezes == 10) {
	clearInterval(timer1);
	}
	de = de + parseFloat(decimo, 10);
	$('#barra-progresso .percentual .numero').html(Math.round(de));
	vezes++;
	}, 30);
	}
	html,body {
	font-family: Helvetica, 'Roboto Sans', Arial, sans-serif;
	}
	#barra-progresso {
	width: 234px;
	height: 335px;
	position: relative;
	font-family: Arial;
	font-weight: bold;
	top: 15px;
	left: 15px;
	background-color: #E4E4E4;
	background-image: url('http://i.imgur.com/L7QmZJB.png');
	background-position: bottom left;
	background-repeat: repeat-y;
	}
	#barra-progresso .concluido, #barra-progresso .percentual {
	position: absolute;
	width: 100%;
	bottom: 0px;
	}
	#barra-progresso .concluido {
	background-color: #009FE0;
	z-index: 100;
	background-image: url('http://i.imgur.com/sfbYNrO.png');
	background-position: bottom left;
	background-repeat: repeat-y;
	}
	#barra-progresso .percentual {
	z-index: 200;
	position: absolute;
	bottom: 15px;
	/* altura do numero referente a base */
	color: #fff;
	text-shadow: 1px 1px 1px #000, 1px 1px 8px rgba(0, 0, 0, 0.4);
	}
	#barra-progresso .percentual > div {
	position: absolute;
	bottom: 0px;
	line-height: 78%;
	}
	#barra-progresso .percentual .numero {
	font-size: 72px;
	vertical-align: bottom;
	letter-spacing: -0.1em;
	right: 50%;
	text-align: right;
	}
	#barra-progresso .percentual .percent {
	font-size: 35px;
	font-weight: normal;
	left: 120px;
	bottom: 20px;
	}
	#barra-progresso .percentual .texto {
	font-size: 16px;
	letter-spacing: -0.08em;
	text-transform: uppercase;
	left: 120px;
	bottom: 2px;
	}
	input#progresso, button {
	font-family: inherit;
	font-size: 16px;
	margin-left: 15px
	}