LoadingAnimationButtonTemplate/index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


    <title>Loading animation Button Template</title>
</head>
<body>
    <div class="buttons-container">
        <button id="btn-1" class="btn-1">
            <i class="fa-regular fa-circle-check" id="btn-1-icon"></i>
            <i class="fa-solid fa-circle-notch" id="btn-1-submit-icon"></i>
            <span id="btn-1-text"> Save</span>
        </button>


        <button class="btn-2-c" id="btn-2">
            <i class="far fa-paper-plane">
            </i>
            <span class="btn-2-text" id="btn-2-text">
                Send Message
            </span>
            <span class="btn-2-loading-animations"></span>

        </button>


        <button class="btn-3" >Press Here</button>

        <button class="loading-button"><span>Send</span></button>

       
            <button id="button" class="button-5">
                Confirm
                <span id="loading"></span>
            </button>
       

    </div>


    <script   src="index.js"></script>
    
</body>
</html>