Bootstrap Loading Button Example Tutorial And Source Code

Please log in or register to like posts.
News

Hi Designers, Today I’m going to show you how to design a bootstrap loading button using html and css. a beautiful way to make image loading button, content loading button, page loading button for a website. if you are finding a great and useful loading button for your website you can make it easy from this article about bootstrap loading button design. Loading Button can get loving from your website visitors.

Loading Button

to design a Loading Button For your website just follow this instructions. first make two files, 1. index.html and 2. style.css then open index.html file and copy past the below code.

<div class="container">
	<div class="row">
        <h1 class="col-xs-12">Loading button effect</h1>
        
		<div class="col-xs-12 text-center">
            <h2>Preview</h2>
            <table class="table">
                <tr>
                    <th>No effect</th>
                    <th>With effect</th>
                </tr>
                <tr>
                    <td colspan="2">Base effect</td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-lg btn-primary">Button</button>
                		<button class="btn btn-lg btn-default">Button</button>
            			<button class="btn btn-lg btn-info">Button</button>
            			<button class="btn btn-lg btn-warning">Button</button>
            			<button class="btn btn-lg btn-danger">Button</button>
                    </td>
                    <td>
                        <button class="btn btn-lg btn-primary m-progress">Button</button>
                		<button class="btn btn-lg btn-default m-progress">Button</button>
            			<button class="btn btn-lg btn-info m-progress">Button</button>
            			<button class="btn btn-lg btn-warning m-progress">Button</button>
            			<button class="btn btn-lg btn-danger m-progress">Button</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">For any size</td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-lg btn-primary">Button</button>
                    	<button class="btn btn-primary">Button</button>
                        <button class="btn btn-sm btn-primary">Button</button>
                        <button class="btn btn-xs btn-primary">Button</button>
                    </td>
                    <td>
                        <button class="btn m-progress btn-lg btn-primary">Button</button>
                        <button class="btn m-progress btn-primary">Button</button>
                        <button class="btn m-progress btn-sm btn-primary">Button</button>
                        <button class="btn m-progress btn-xs btn-primary">Button</button>
                    </td>
                </tr>
            </table>
		</div>
	</div>
</div>

Then open style.css file and copy past the below code.

@-webkit-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-moz-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-o-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.m-progress {
    position: relative;
    opacity: .8;
    color: transparent !important;
    text-shadow: none !important;
}

.m-progress:hover,
.m-progress:active,
.m-progress:focus {
    cursor: default;
    color: transparent;
    outline: none !important;
    box-shadow: none;
}

.m-progress:before {
    content: '';
    
    display: inline-block;
    
    position: absolute;
    background: transparent;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    
    box-sizing: border-box;
    
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
    
    width: 24px;
    height: 24px;
    
    -webkit-animation: ld 1s ease-in-out infinite;
    -moz-animation:    ld 1s ease-in-out infinite;
    -o-animation:      ld 1s ease-in-out infinite;
    animation:         ld 1s ease-in-out infinite;
}

.btn-default.m-progress:before {
    border-left-color: #333333;
    border-right-color: #333333;
}

.btn-lg.m-progress:before {
    margin-top: -16px;
    margin-left: -16px;
    
    width: 32px;
    height: 32px;
}

.btn-sm.m-progress:before {
    margin-top: -9px;
    margin-left: -9px;
    
    width: 18px;
    height: 18px;
}

.btn-xs.m-progress:before {
    margin-top: -7px;
    margin-left: -7px;
    
    width: 14px;
    height: 14px;
}

now save the file and run into your website. hope the loading button help you. for Live Demo of Loading Button You Can Visit Bootstrap Snippets.

Bootstrap Related Posts

Bootstrap Snippets Semi Transparent Highlight Box Example Demo

Bootstrap Example eCommerce Product Detail – Bootstrap Snippets

Bootstrap Navbar Example Like Flipkart – Bootstrap Nav Bar Design

Bootstrap Registration Page Design Example Demo and Tutorial

Bootstrap Flat Responsive Dashboard Design Bootstrap Example

2 comments on “Bootstrap Loading Button Example Tutorial And Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *