Search

How To Create Loading Button Using HTML, CSS, and JavaScript




RESULT


You can create a loading button very easily using HTML, CSS, and JavaScript.


You can test the live demo below.


The Source code for the above demo is given below


SOURCE CODE


HTML

<body>
 <div class="main">
 <button id="click-button" onclick="loadButton()">
                CLICK TO LOAD
 </button>

 <button id="loading-bar" onclick ="stopLoading()" 
 class="button-loading display-none"> 
 <span class="spinner"></span>
 </button>
 </div>
 </body>

CSS


.main{
 display: flex;
 justify-content: center;
 margin-top: 300px;
}
button{
 background: black;
 color: white;
 padding: 20px;
 border-radius: 15em;
 border: solid;
 width: 15em;
 cursor: pointer;
 outline: none;
}
body{
 background: -webkit-gradient(linear, left top, 
 left bottom, from(red), to(black)) fixed;
 background-repeat: no-repeat;
 background-color: red;
}
.spinner {
 display: block;
 width: 34px;
 height: 34px;
 position: absolute;
 top: 8px;
 left: calc(50% - 17px);
 background: transparent;
 box-sizing: border-box;
 border-top: 4px solid white;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-bottom: 4px solid transparent;
 border-radius: 100%;
 animation: spin 0.7s ease-out infinite;
}
.button-loading{
 position: relative;
 height: 50px;
 width: 200px;
 background-image: none;
 border: solid;
 outline: none;
 background-color: black;
 color: white;
 text-transform: uppercase;
 font-size: 20px;
 letter-spacing: 2px;
 cursor: pointer;
 transition: all 0.2s ease-out;
 border-radius: 50px;
 width: 50px;
}
@keyframes spin {
    0% {
 transform: rotateZ(0);
    }
    100% {
 transform: rotateZ(360deg);
    }
}
.display-none{
 display: none;
}
.add-display{
 display: block;
}

JavaScript

function loadButton() {
 var loadingBar = document.getElementById("loading-bar");
 loadingBar.classList.remove("display-none");
 loadingBar.classList.add("add-display");
 var clickButton = document.getElementById("click-button");
 clickButton.classList.add("display-none");
 clickButton.classList.remove("add-display");
}

function stopLoading() {
 var loadingBar = document.getElementById("loading-bar");
 loadingBar.classList.add("display-none");
 loadingBar.classList.remove("add-display");
 var clickButton = document.getElementById("click-button");
 clickButton.classList.add("add-display");
 clickButton.classList.remove("display-none");
}

Let me know in the comments below if you find it useful.


Subscribe to webtechnologyguide.com for the latest updates and follow on social media platforms for the latest updates.


https://www.facebook.com/webTechnologyGuide

https://www.instagram.com/web_technology_guide/

https://www.linkedin.com/company/web-technology-guide


38 views0 comments

Recent Posts

See All