SMACSS states and JS

Showcase of SMACSS state manipulation with jQuery.

by espeon

HTML

<div id="content">
    <form id="update-quantity" method="post" action="#">
        <input type="text" value="Modifiez-moi !" />
    </form>
</div>

CSS

#content {
    text-align: center;
}

.is-loading:after {
    content: "Changement en cours...";
    color: red;
}

.is-loading > form {
    opacity: 0.5;
}

JavaScript

$('form#update-quantity').find('input').change(function() {
    // Ajoute le loading sur la page (calcul en cours)
    $("#content").addClass('is-loading');
    
    setTimeout(function() { 
        // Retire le loading (fin du calcul)
        $("#content").removeClass('is-loading'); 
    }, 2000);
});