Js 百分比进度条

body { ???????background-color: #f5f7f9; ???????color: #6c6c6c; ???????font: 300 1em/1.5em; ???} ???.container { ???????left: 50%; ???????position: absolute; ???????top: 40%; ???????transform: translate(-50%, -50%); ???????-webkit-transform: translate(-50%, -50%); ???} ???/* PROGRESS */ ???.progress { ???????background-color: #e5e9eb; ???????height: 0.25em; ???????position: relative; ???????width: 24em; ???} ???#progress-bar { ???????animation-duration: 3s; ???????animation-name: width; ???????background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); ???????background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); ???????background-size: 24em 0.25em; ???????height: 100%; ???????position: relative; ???} ???@keyframes width { ???????0%, ???????100% { ???????????transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); ???????} ???????0% { ???????????width: 0; ???????} ???????100% { ???????????width: 100%; ???????} ???} ???.container .notice { ???????animation: change 5s linear 0s infinite; ???????font-size: 15px; ???????margin: 10px; ???} ???@keyframes change { ???????0% { ???????????color: #4cd964; ???????} ???????25% { ???????????color: #5ac8fa; ???????} ???????50% { ???????????color: #007aff; ???????} ???????75% { ???????????color: #5856d6; ???????} ???????100% { ???????????color: #ff2d55; ???????} ???}

<div class="container"> ???????<div class="notice"id="notice"> ???????????奴家,正在~客官不要急啦~(づ￣ 3￣)づ ???????</div> ???????<div class="progress"> ???????????<div id="progress-bar"> ???????????</div> ???????</div> ?</div>

 ?window.onload = function() { ???????????var progressBar = { ???????????????//初始化 ???????????????init: function() { ???????????????????var oBar = document.getElementById(‘progress-bar‘); ???????????????????var oNotice = document.getElementById(‘notice‘); ???????????????????var count = 0; ???????????????????//百分比计算,根据css的来 ???????????????????var timer = setInterval(function() { ???????????????????????count++; ???????????????????????oBar.innerHTML = count + ‘%‘; ???????????????????????if (count === 100) { ???????????????????????????oNotice.innerHTML = ‘客官,奴家好了~(????)‘ ???????????????????????????clearInterval(timer); ???????????????????????} ???????????????????}, 30); ???????????????} ???????????}; ???????????progressBar.init(); ???????}