Button with Progress Indicator
How do I make an button with progress indicator?
What is a button with progress indicator? How do you make a button with progress indicator? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.
Button with Progress Indicator Previews
Button with Progress Indicator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button with Progress Indicator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="stage"> <button class="button--progress">Download</button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Button with Progress Indicator - Script Codes CSS Codes
body { background: #EFEFEF; font-family: Arial, Helvetica, sans-serif;
}
.stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
button { display: table-cell; padding: 16px 32px; border: none; background: #71cd9f; font-weight: 300; font-size: 18px; color: #fff; transition: background 350ms ease;
}
button:hover,
button:focus { outline: none; cursor: pointer;
}
button:hover { background: #71dd9f;
}
.button--progress { position: relative;
}
.button--progress::before, .button--progress::after { content: ''; display: block; height: 20%; position: absolute; bottom: 0; left: 0; background: #71ad9f; opacity: 0; transition: opacity 0ms linear; transform: translateY(100%);
}
.button--progress::before { width: 100%;
}
.button--progress::after { width: 0;
}
.button--progress[data-progress]::before, .button--progress[data-progress]::after { opacity: 1; transition: opacity 250ms ease, width 250ms ease;
}
.button--progress[data-progress="1"]:hover, .button--progress[data-progress="1"]:focus { cursor: default;
}
.button--progress[data-progress="1"]::after { background: #aae1c6; width: 1%;
}
.button--progress[data-progress="2"]:hover, .button--progress[data-progress="2"]:focus { cursor: default;
}
.button--progress[data-progress="2"]::after { background: #aae1c6; width: 2%;
}
.button--progress[data-progress="3"]:hover, .button--progress[data-progress="3"]:focus { cursor: default;
}
.button--progress[data-progress="3"]::after { background: #aae1c6; width: 3%;
}
.button--progress[data-progress="4"]:hover, .button--progress[data-progress="4"]:focus { cursor: default;
}
.button--progress[data-progress="4"]::after { background: #aae1c6; width: 4%;
}
.button--progress[data-progress="5"]:hover, .button--progress[data-progress="5"]:focus { cursor: default;
}
.button--progress[data-progress="5"]::after { background: #aae1c6; width: 5%;
}
.button--progress[data-progress="6"]:hover, .button--progress[data-progress="6"]:focus { cursor: default;
}
.button--progress[data-progress="6"]::after { background: #aae1c6; width: 6%;
}
.button--progress[data-progress="7"]:hover, .button--progress[data-progress="7"]:focus { cursor: default;
}
.button--progress[data-progress="7"]::after { background: #aae1c6; width: 7%;
}
.button--progress[data-progress="8"]:hover, .button--progress[data-progress="8"]:focus { cursor: default;
}
.button--progress[data-progress="8"]::after { background: #aae1c6; width: 8%;
}
.button--progress[data-progress="9"]:hover, .button--progress[data-progress="9"]:focus { cursor: default;
}
.button--progress[data-progress="9"]::after { background: #aae1c6; width: 9%;
}
.button--progress[data-progress="10"]:hover, .button--progress[data-progress="10"]:focus { cursor: default;
}
.button--progress[data-progress="10"]::after { background: #aae1c6; width: 10%;
}
.button--progress[data-progress="11"]:hover, .button--progress[data-progress="11"]:focus { cursor: default;
}
.button--progress[data-progress="11"]::after { background: #aae1c6; width: 11%;
}
.button--progress[data-progress="12"]:hover, .button--progress[data-progress="12"]:focus { cursor: default;
}
.button--progress[data-progress="12"]::after { background: #aae1c6; width: 12%;
}
.button--progress[data-progress="13"]:hover, .button--progress[data-progress="13"]:focus { cursor: default;
}
.button--progress[data-progress="13"]::after { background: #aae1c6; width: 13%;
}
.button--progress[data-progress="14"]:hover, .button--progress[data-progress="14"]:focus { cursor: default;
}
.button--progress[data-progress="14"]::after { background: #aae1c6; width: 14%;
}
.button--progress[data-progress="15"]:hover, .button--progress[data-progress="15"]:focus { cursor: default;
}
.button--progress[data-progress="15"]::after { background: #aae1c6; width: 15%;
}
.button--progress[data-progress="16"]:hover, .button--progress[data-progress="16"]:focus { cursor: default;
}
.button--progress[data-progress="16"]::after { background: #aae1c6; width: 16%;
}
.button--progress[data-progress="17"]:hover, .button--progress[data-progress="17"]:focus { cursor: default;
}
.button--progress[data-progress="17"]::after { background: #aae1c6; width: 17%;
}
.button--progress[data-progress="18"]:hover, .button--progress[data-progress="18"]:focus { cursor: default;
}
.button--progress[data-progress="18"]::after { background: #aae1c6; width: 18%;
}
.button--progress[data-progress="19"]:hover, .button--progress[data-progress="19"]:focus { cursor: default;
}
.button--progress[data-progress="19"]::after { background: #aae1c6; width: 19%;
}
.button--progress[data-progress="20"]:hover, .button--progress[data-progress="20"]:focus { cursor: default;
}
.button--progress[data-progress="20"]::after { background: #aae1c6; width: 20%;
}
.button--progress[data-progress="21"]:hover, .button--progress[data-progress="21"]:focus { cursor: default;
}
.button--progress[data-progress="21"]::after { background: #aae1c6; width: 21%;
}
.button--progress[data-progress="22"]:hover, .button--progress[data-progress="22"]:focus { cursor: default;
}
.button--progress[data-progress="22"]::after { background: #aae1c6; width: 22%;
}
.button--progress[data-progress="23"]:hover, .button--progress[data-progress="23"]:focus { cursor: default;
}
.button--progress[data-progress="23"]::after { background: #aae1c6; width: 23%;
}
.button--progress[data-progress="24"]:hover, .button--progress[data-progress="24"]:focus { cursor: default;
}
.button--progress[data-progress="24"]::after { background: #aae1c6; width: 24%;
}
.button--progress[data-progress="25"]:hover, .button--progress[data-progress="25"]:focus { cursor: default;
}
.button--progress[data-progress="25"]::after { background: #aae1c6; width: 25%;
}
.button--progress[data-progress="26"]:hover, .button--progress[data-progress="26"]:focus { cursor: default;
}
.button--progress[data-progress="26"]::after { background: #aae1c6; width: 26%;
}
.button--progress[data-progress="27"]:hover, .button--progress[data-progress="27"]:focus { cursor: default;
}
.button--progress[data-progress="27"]::after { background: #aae1c6; width: 27%;
}
.button--progress[data-progress="28"]:hover, .button--progress[data-progress="28"]:focus { cursor: default;
}
.button--progress[data-progress="28"]::after { background: #aae1c6; width: 28%;
}
.button--progress[data-progress="29"]:hover, .button--progress[data-progress="29"]:focus { cursor: default;
}
.button--progress[data-progress="29"]::after { background: #aae1c6; width: 29%;
}
.button--progress[data-progress="30"]:hover, .button--progress[data-progress="30"]:focus { cursor: default;
}
.button--progress[data-progress="30"]::after { background: #aae1c6; width: 30%;
}
.button--progress[data-progress="31"]:hover, .button--progress[data-progress="31"]:focus { cursor: default;
}
.button--progress[data-progress="31"]::after { background: #aae1c6; width: 31%;
}
.button--progress[data-progress="32"]:hover, .button--progress[data-progress="32"]:focus { cursor: default;
}
.button--progress[data-progress="32"]::after { background: #aae1c6; width: 32%;
}
.button--progress[data-progress="33"]:hover, .button--progress[data-progress="33"]:focus { cursor: default;
}
.button--progress[data-progress="33"]::after { background: #aae1c6; width: 33%;
}
.button--progress[data-progress="34"]:hover, .button--progress[data-progress="34"]:focus { cursor: default;
}
.button--progress[data-progress="34"]::after { background: #aae1c6; width: 34%;
}
.button--progress[data-progress="35"]:hover, .button--progress[data-progress="35"]:focus { cursor: default;
}
.button--progress[data-progress="35"]::after { background: #aae1c6; width: 35%;
}
.button--progress[data-progress="36"]:hover, .button--progress[data-progress="36"]:focus { cursor: default;
}
.button--progress[data-progress="36"]::after { background: #aae1c6; width: 36%;
}
.button--progress[data-progress="37"]:hover, .button--progress[data-progress="37"]:focus { cursor: default;
}
.button--progress[data-progress="37"]::after { background: #aae1c6; width: 37%;
}
.button--progress[data-progress="38"]:hover, .button--progress[data-progress="38"]:focus { cursor: default;
}
.button--progress[data-progress="38"]::after { background: #aae1c6; width: 38%;
}
.button--progress[data-progress="39"]:hover, .button--progress[data-progress="39"]:focus { cursor: default;
}
.button--progress[data-progress="39"]::after { background: #aae1c6; width: 39%;
}
.button--progress[data-progress="40"]:hover, .button--progress[data-progress="40"]:focus { cursor: default;
}
.button--progress[data-progress="40"]::after { background: #aae1c6; width: 40%;
}
.button--progress[data-progress="41"]:hover, .button--progress[data-progress="41"]:focus { cursor: default;
}
.button--progress[data-progress="41"]::after { background: #aae1c6; width: 41%;
}
.button--progress[data-progress="42"]:hover, .button--progress[data-progress="42"]:focus { cursor: default;
}
.button--progress[data-progress="42"]::after { background: #aae1c6; width: 42%;
}
.button--progress[data-progress="43"]:hover, .button--progress[data-progress="43"]:focus { cursor: default;
}
.button--progress[data-progress="43"]::after { background: #aae1c6; width: 43%;
}
.button--progress[data-progress="44"]:hover, .button--progress[data-progress="44"]:focus { cursor: default;
}
.button--progress[data-progress="44"]::after { background: #aae1c6; width: 44%;
}
.button--progress[data-progress="45"]:hover, .button--progress[data-progress="45"]:focus { cursor: default;
}
.button--progress[data-progress="45"]::after { background: #aae1c6; width: 45%;
}
.button--progress[data-progress="46"]:hover, .button--progress[data-progress="46"]:focus { cursor: default;
}
.button--progress[data-progress="46"]::after { background: #aae1c6; width: 46%;
}
.button--progress[data-progress="47"]:hover, .button--progress[data-progress="47"]:focus { cursor: default;
}
.button--progress[data-progress="47"]::after { background: #aae1c6; width: 47%;
}
.button--progress[data-progress="48"]:hover, .button--progress[data-progress="48"]:focus { cursor: default;
}
.button--progress[data-progress="48"]::after { background: #aae1c6; width: 48%;
}
.button--progress[data-progress="49"]:hover, .button--progress[data-progress="49"]:focus { cursor: default;
}
.button--progress[data-progress="49"]::after { background: #aae1c6; width: 49%;
}
.button--progress[data-progress="50"]:hover, .button--progress[data-progress="50"]:focus { cursor: default;
}
.button--progress[data-progress="50"]::after { background: #aae1c6; width: 50%;
}
.button--progress[data-progress="51"]:hover, .button--progress[data-progress="51"]:focus { cursor: default;
}
.button--progress[data-progress="51"]::after { background: #aae1c6; width: 51%;
}
.button--progress[data-progress="52"]:hover, .button--progress[data-progress="52"]:focus { cursor: default;
}
.button--progress[data-progress="52"]::after { background: #aae1c6; width: 52%;
}
.button--progress[data-progress="53"]:hover, .button--progress[data-progress="53"]:focus { cursor: default;
}
.button--progress[data-progress="53"]::after { background: #aae1c6; width: 53%;
}
.button--progress[data-progress="54"]:hover, .button--progress[data-progress="54"]:focus { cursor: default;
}
.button--progress[data-progress="54"]::after { background: #aae1c6; width: 54%;
}
.button--progress[data-progress="55"]:hover, .button--progress[data-progress="55"]:focus { cursor: default;
}
.button--progress[data-progress="55"]::after { background: #aae1c6; width: 55%;
}
.button--progress[data-progress="56"]:hover, .button--progress[data-progress="56"]:focus { cursor: default;
}
.button--progress[data-progress="56"]::after { background: #aae1c6; width: 56%;
}
.button--progress[data-progress="57"]:hover, .button--progress[data-progress="57"]:focus { cursor: default;
}
.button--progress[data-progress="57"]::after { background: #aae1c6; width: 57%;
}
.button--progress[data-progress="58"]:hover, .button--progress[data-progress="58"]:focus { cursor: default;
}
.button--progress[data-progress="58"]::after { background: #aae1c6; width: 58%;
}
.button--progress[data-progress="59"]:hover, .button--progress[data-progress="59"]:focus { cursor: default;
}
.button--progress[data-progress="59"]::after { background: #aae1c6; width: 59%;
}
.button--progress[data-progress="60"]:hover, .button--progress[data-progress="60"]:focus { cursor: default;
}
.button--progress[data-progress="60"]::after { background: #aae1c6; width: 60%;
}
.button--progress[data-progress="61"]:hover, .button--progress[data-progress="61"]:focus { cursor: default;
}
.button--progress[data-progress="61"]::after { background: #aae1c6; width: 61%;
}
.button--progress[data-progress="62"]:hover, .button--progress[data-progress="62"]:focus { cursor: default;
}
.button--progress[data-progress="62"]::after { background: #aae1c6; width: 62%;
}
.button--progress[data-progress="63"]:hover, .button--progress[data-progress="63"]:focus { cursor: default;
}
.button--progress[data-progress="63"]::after { background: #aae1c6; width: 63%;
}
.button--progress[data-progress="64"]:hover, .button--progress[data-progress="64"]:focus { cursor: default;
}
.button--progress[data-progress="64"]::after { background: #aae1c6; width: 64%;
}
.button--progress[data-progress="65"]:hover, .button--progress[data-progress="65"]:focus { cursor: default;
}
.button--progress[data-progress="65"]::after { background: #aae1c6; width: 65%;
}
.button--progress[data-progress="66"]:hover, .button--progress[data-progress="66"]:focus { cursor: default;
}
.button--progress[data-progress="66"]::after { background: #aae1c6; width: 66%;
}
.button--progress[data-progress="67"]:hover, .button--progress[data-progress="67"]:focus { cursor: default;
}
.button--progress[data-progress="67"]::after { background: #aae1c6; width: 67%;
}
.button--progress[data-progress="68"]:hover, .button--progress[data-progress="68"]:focus { cursor: default;
}
.button--progress[data-progress="68"]::after { background: #aae1c6; width: 68%;
}
.button--progress[data-progress="69"]:hover, .button--progress[data-progress="69"]:focus { cursor: default;
}
.button--progress[data-progress="69"]::after { background: #aae1c6; width: 69%;
}
.button--progress[data-progress="70"]:hover, .button--progress[data-progress="70"]:focus { cursor: default;
}
.button--progress[data-progress="70"]::after { background: #aae1c6; width: 70%;
}
.button--progress[data-progress="71"]:hover, .button--progress[data-progress="71"]:focus { cursor: default;
}
.button--progress[data-progress="71"]::after { background: #aae1c6; width: 71%;
}
.button--progress[data-progress="72"]:hover, .button--progress[data-progress="72"]:focus { cursor: default;
}
.button--progress[data-progress="72"]::after { background: #aae1c6; width: 72%;
}
.button--progress[data-progress="73"]:hover, .button--progress[data-progress="73"]:focus { cursor: default;
}
.button--progress[data-progress="73"]::after { background: #aae1c6; width: 73%;
}
.button--progress[data-progress="74"]:hover, .button--progress[data-progress="74"]:focus { cursor: default;
}
.button--progress[data-progress="74"]::after { background: #aae1c6; width: 74%;
}
.button--progress[data-progress="75"]:hover, .button--progress[data-progress="75"]:focus { cursor: default;
}
.button--progress[data-progress="75"]::after { background: #aae1c6; width: 75%;
}
.button--progress[data-progress="76"]:hover, .button--progress[data-progress="76"]:focus { cursor: default;
}
.button--progress[data-progress="76"]::after { background: #aae1c6; width: 76%;
}
.button--progress[data-progress="77"]:hover, .button--progress[data-progress="77"]:focus { cursor: default;
}
.button--progress[data-progress="77"]::after { background: #aae1c6; width: 77%;
}
.button--progress[data-progress="78"]:hover, .button--progress[data-progress="78"]:focus { cursor: default;
}
.button--progress[data-progress="78"]::after { background: #aae1c6; width: 78%;
}
.button--progress[data-progress="79"]:hover, .button--progress[data-progress="79"]:focus { cursor: default;
}
.button--progress[data-progress="79"]::after { background: #aae1c6; width: 79%;
}
.button--progress[data-progress="80"]:hover, .button--progress[data-progress="80"]:focus { cursor: default;
}
.button--progress[data-progress="80"]::after { background: #aae1c6; width: 80%;
}
.button--progress[data-progress="81"]:hover, .button--progress[data-progress="81"]:focus { cursor: default;
}
.button--progress[data-progress="81"]::after { background: #aae1c6; width: 81%;
}
.button--progress[data-progress="82"]:hover, .button--progress[data-progress="82"]:focus { cursor: default;
}
.button--progress[data-progress="82"]::after { background: #aae1c6; width: 82%;
}
.button--progress[data-progress="83"]:hover, .button--progress[data-progress="83"]:focus { cursor: default;
}
.button--progress[data-progress="83"]::after { background: #aae1c6; width: 83%;
}
.button--progress[data-progress="84"]:hover, .button--progress[data-progress="84"]:focus { cursor: default;
}
.button--progress[data-progress="84"]::after { background: #aae1c6; width: 84%;
}
.button--progress[data-progress="85"]:hover, .button--progress[data-progress="85"]:focus { cursor: default;
}
.button--progress[data-progress="85"]::after { background: #aae1c6; width: 85%;
}
.button--progress[data-progress="86"]:hover, .button--progress[data-progress="86"]:focus { cursor: default;
}
.button--progress[data-progress="86"]::after { background: #aae1c6; width: 86%;
}
.button--progress[data-progress="87"]:hover, .button--progress[data-progress="87"]:focus { cursor: default;
}
.button--progress[data-progress="87"]::after { background: #aae1c6; width: 87%;
}
.button--progress[data-progress="88"]:hover, .button--progress[data-progress="88"]:focus { cursor: default;
}
.button--progress[data-progress="88"]::after { background: #aae1c6; width: 88%;
}
.button--progress[data-progress="89"]:hover, .button--progress[data-progress="89"]:focus { cursor: default;
}
.button--progress[data-progress="89"]::after { background: #aae1c6; width: 89%;
}
.button--progress[data-progress="90"]:hover, .button--progress[data-progress="90"]:focus { cursor: default;
}
.button--progress[data-progress="90"]::after { background: #aae1c6; width: 90%;
}
.button--progress[data-progress="91"]:hover, .button--progress[data-progress="91"]:focus { cursor: default;
}
.button--progress[data-progress="91"]::after { background: #aae1c6; width: 91%;
}
.button--progress[data-progress="92"]:hover, .button--progress[data-progress="92"]:focus { cursor: default;
}
.button--progress[data-progress="92"]::after { background: #aae1c6; width: 92%;
}
.button--progress[data-progress="93"]:hover, .button--progress[data-progress="93"]:focus { cursor: default;
}
.button--progress[data-progress="93"]::after { background: #aae1c6; width: 93%;
}
.button--progress[data-progress="94"]:hover, .button--progress[data-progress="94"]:focus { cursor: default;
}
.button--progress[data-progress="94"]::after { background: #aae1c6; width: 94%;
}
.button--progress[data-progress="95"]:hover, .button--progress[data-progress="95"]:focus { cursor: default;
}
.button--progress[data-progress="95"]::after { background: #aae1c6; width: 95%;
}
.button--progress[data-progress="96"]:hover, .button--progress[data-progress="96"]:focus { cursor: default;
}
.button--progress[data-progress="96"]::after { background: #aae1c6; width: 96%;
}
.button--progress[data-progress="97"]:hover, .button--progress[data-progress="97"]:focus { cursor: default;
}
.button--progress[data-progress="97"]::after { background: #aae1c6; width: 97%;
}
.button--progress[data-progress="98"]:hover, .button--progress[data-progress="98"]:focus { cursor: default;
}
.button--progress[data-progress="98"]::after { background: #aae1c6; width: 98%;
}
.button--progress[data-progress="99"]:hover, .button--progress[data-progress="99"]:focus { cursor: default;
}
.button--progress[data-progress="99"]::after { background: #aae1c6; width: 99%;
}
.button--progress[data-progress="100"]:hover, .button--progress[data-progress="100"]:focus { cursor: default;
}
.button--progress[data-progress="100"]::after { background: #aae1c6; width: 100%;
}
Button with Progress Indicator - Script Codes JS Codes
(function() { let $element = {}, $content = '', $self class Button { constructor(element, content) { $self = this, $element = element, $content = content $element.on('click', $self.OnStart) } OnStart() { $element.off('click') $element.attr('data-progress', '0') $element.html($content) $self.Update(0) } Update(progress) { if (progress >= 100) { return $self.OnFinish() } else { $element.attr('data-progress', progress) progress += Math.floor(Math.random() * 10) + 1 return window.setTimeout(() => { $self.Update(progress) }, 250) } } OnFinish() { $element.html('Download') $element.removeAttr('data-progress') $element.on('click', $self.OnStart) } } var btn = new Button($('.button--progress'), 'Building Your Report...')
})()
| Developer | Chris Evans |
| Username | anitorious |
| Uploaded | December 27, 2022 |
| Rating | 3 |
| Size | 4,286 Kb |
| Views | 10,120 |
Do you need developer help for Button with Progress Indicator?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Chris Evans (anitorious) Script Codes
| Name | Size |
| CSS Drawing - Life Ring | 2,476 Kb |
| Natural Form Editing | 2,741 Kb |
| Animated Notification - Successful Action | 3,210 Kb |
| Strengths Profile Dashboard Menu | 4,511 Kb |
| 3D Interface | 3,838 Kb |
| Loading Indicator - CSS3 Animation | 3,396 Kb |
| Dashboard Module Management | 9,257 Kb |
| Single Field List Filter | 3,377 Kb |
| Expanding Form | 3,462 Kb |
| Searching for Answers | 4,761 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
| A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| Colorful Sliders | Chanrith | 1,246 Kb |
| Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
| Mesmerizing octopus | Jllodra | 3,549 Kb |
| Preloader | Rikki_Sixx | 2,815 Kb |
| Image Hover | Johnheiner | 3,409 Kb |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| Pictos font library from CodePen | Jstam | 3,790 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!