A Pen by jakob-e

Thumbnail
This awesome code was written by jakob-e, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jakob-e ©
  • HTML
  • CSS
  • JavaScript
    <div class="page" id="app">
    <vue-load-button :loading="loading">click to load</vue-load-button>
    <article class="card">
        <header></header>
        <section></section>
    </article>
    
</div>

/*Downloaded from https://www.codeseek.co/jakob-e/a-pen-by-jakob-e-YvqrGa */
    $layout-padding  : 1em;
$layout-align    : center;
$layout-max-width: 980px; 
$layout-min-width: 320px; 






@mixin reset {
    //  sane box model
    //  clear margins
    //  ensure 
    html { box-sizing: border-box; } 
    *,*:before,*:after { box-sizing: inherit; }    
    body { margin: 0; }


    //  
    button::-moz-focus-inner,
    input::-moz-focus-inner { border: 0; padding: 0; }   
    button, input {
        appearance: none;
        border: 0;
        border-radius: 0;
        background: none;
        outline: 0;
        margin: 0;
        padding: 0;
    }



}


.page {
    padding: $layout-padding;
    outline: 1px dashed;
    margin: $layout-padding;
}



@include reset;




@mixin vue-load-button {
    .vue-load-button {
        position: relative; 
        background: dodgerblue; 
        padding: .5em 2em .5em 2em; 
        font-size: .85em; 
        color: white; 
        border-radius: .5em; 
        transition: 200ms;
        &:before {
            content:'';
            position: absolute;
            top: calc(50% - .5em);
            right: 1em;
            display: inline-block;
            border: 2px solid rgba(white, 0.3);
            border-left-color: white;
            border-radius: 50%;
            height: 1em;
            width : 1em;
            transition: inherit;
            opacity: 0;
            animation: vue-load-button-spin 1.2s linear infinite;
        }
        &.loading {
            text-indent: -.5em;    
            padding-right: 2.5em;
        }
        &.loading:before {
            opacity: 1;     
        }
        
        @keyframes vue-load-button-spin { 
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

    }
}

@include vue-load-button;


/*Downloaded from https://www.codeseek.co/jakob-e/a-pen-by-jakob-e-YvqrGa */
    

Vue.component('vue-load-button',{
    template:`<button :class="[$options._componentTag, {loading}]" :disabled="loading" @click="loading = !loading"><slot></slot></button>`,
    data(){ return { loading: false }}
});




new Vue({
    el:'#app',
    data:{
        loading: false
    }
})

Comments