Bootstrap和ladda.js

風靈使發表於2018-12-31
bootJS
<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>
            Ladda for Bootstrap 3 UI
        </title>
        <meta name="description" content="Bootstrap 3 loading state for buttons">
        <meta name="author" content="Maks Surguy">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/ladda-themeless.min.css">
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h1>
                        Ladda UI for Bootstrap 3
                    </h1>
                    <p>
                        A UI concept by
                        <a href="http://twitter.com/hakimel" target="_blank">
                            @hakimel
                        </a>
                        which merges loading indicators into the action that invoked them. Primarily
                        intended for use with forms where it gives users immediate feedback upon
                        submit rather than leaving them wondering while the browser does its thing.
                        This project is used by @hakimel
                        <a href="http://slid.es">
                            slid.es
                        </a>
                        and by @msurguy on the new upcoming
                        <a href="http://bootsnipp.com" target="_blank">
                            Bootsnipp
                        </a>
                        .
                    </p>
                    <h2>
                        Demo
                        <small>
                            Click the buttons to see the effect
                        </small>
                    </h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-primary ladda-button" data-style="expand-left">
                            <span class="ladda-label">
                                expand-left
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-right">
                            <span class="ladda-label">
                                expand-right
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-up">
                            <span class="ladda-label">
                                expand-up
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-down">
                            <span class="ladda-label">
                                expand-down
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-info ladda-button" data-style="zoom-in">
                            <span class="ladda-label">
                                zoom-in
                            </span>
                        </button>
                        <button class="btn btn-info ladda-button" data-style="zoom-out">
                            <span class="ladda-label">
                                zoom-out
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-warning ladda-button" data-style="slide-left">
                            <span class="ladda-label">
                                slide-left
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-right">
                            <span class="ladda-label">
                                slide-right
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-up">
                            <span class="ladda-label">
                                slide-up
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-down">
                            <span class="ladda-label">
                                slide-down
                            </span>
                        </button>
                    </p>
                    <p>
                        <button class="btn btn-warning ladda-button" data-style="contract">
                            <span class="ladda-label">
                                contract
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center progress-demo">
                    <p>
                        Built-in progress bar
                    </p>
                    <p>
                        <button class="btn btn-danger ladda-button" data-style="expand-right">
                            <span class="ladda-label">
                                expand-right
                            </span>
                        </button>
                        <button class="btn btn-danger ladda-button" data-style="expand-left">
                            <span class="ladda-label">
                                expand-left
                            </span>
                        </button>
                        <button class="btn btn-danger ladda-button" data-style="contract">
                            <span class="ladda-label">
                                contract
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        Sizes
                    </p>
                    <p>
                        <button class="btn btn-primary btn-xs ladda-button" data-style="expand-right"
                        data-size="xs">
                            <span class="ladda-label">
                                extra small
                            </span>
                        </button>
                        <button class="btn btn-primary btn-sm ladda-button" data-style="expand-right"
                        data-size="s">
                            <span class="ladda-label">
                                small
                            </span>
                        </button>
                        <button class="btn btn-primary btn-lg ladda-button" data-style="expand-right"
                        data-size="l">
                            <span class="ladda-label">
                                large
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h2>
                        Usage:
                    </h2>
                    <hr>
                    <p>
                        Include the CSS and Javascript for Spin.js and Ladda effect:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt; &lt;script
                            src="dist/spin.min.js"&gt;&lt;/script&gt; &lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;
                        </code>
                    </pre>
                    <p>
                        Then to produce a button with the Ladda effect:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span
                            class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;
                        </code>
                    </pre>
                    <p>
                        Or using &quot;a&quot; tag:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span
                            class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;
                        </code>
                    </pre>
                    <p>
                        You can choose the style of the effect by setting the
                        <code>
                            data-style
                        </code>
                        attribute:
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-style="expand-left" data-style="expand-left" data-style="expand-right"
                            data-style="expand-up" data-style="zoom-in" data-style="zoom-out" data-style="slide-left"
                            data-style="slide-right" data-style="slide-up" data-style="slide-down"
                            data-style="contract"
                        </code>
                    </pre>
                    <p>
                        You can choose the size of the spinner by setting the
                        <code>
                            data-size
                        </code>
                        attribute:
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-size="xs" data-size="s" data-size="l"
                        </code>
                    </pre>
                    <p>
                        You can choose the color of the spinner by setting the
                        <code>
                            data-spinner-color
                        </code>
                        attribute (HEX code):
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-spinner-color="#FF0000"
                        </code>
                    </pre>
                    <h2>
                        Control the UI state with Javascript:
                    </h2>
                    <p>
                        To activate the effect you can bind Ladda to all buttons that submit a
                        form
                    </p>
                    <pre>
                        <code class="language-javascript">
                            Ladda.bind( 'input[type=submit]' );
                        </code>
                    </pre>
                    <p>
                        When using AJAX forms, you can use the following syntax:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button"
                            data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit
                            form&lt;/span&gt;&lt;/a&gt;
                        </code>
                    </pre>
                    <pre>
                        <code class="language-javascript">
                            $(function() { $('#form-submit').click(function(e){ e.preventDefault();
                            var l = Ladda.create(this); l.start(); $.post("your-url", { data : data
                            }, function(response){ console.log(response); }, "json") .always(function()
                            { l.stop(); }); return false; }); });
                        </code>
                    </pre>
                    <p>
                        Other methods available through Javascript
                    </p>
                    <pre>
                        <code class="language-javascript">
                            l.stop(); l.toggle(); l.isLoading(); l.setProgress( 0-1 );
                        </code>
                    </pre>
                    <p>
                        Love this? Tweet it!
                        <a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap"
                        data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small"
                        data-related="bootsnipp">
                        </a>
                    </p>
                    <p style="margin-bottom:100px;">
                        Original Ladda UI concept by
                        <a href="http://hakim.se">
                            Hakim El Hattab
                        </a>
                        /
                        <a href="http://twitter.com/hakimel">
                            @hakimel
                        </a>
                        , examples adapted to work with Bootstrap 3 by
                        <a href="http://twitter.com/msurguy" target="_blank">
                            @msurguy
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <script src="js/spin.min.js">
        </script>
        <script src="js/ladda.min.js">
        </script>
        <script>
            // Bind normal buttons
            Ladda.bind('div:not(.progress-demo) button', {
                timeout: 2000
            });

            // Bind progress buttons and simulate loading progress
            Ladda.bind('.progress-demo button', {
                callback: function(instance) {
                    var progress = 0;
                    var interval = setInterval(function() {
                        progress = Math.min(progress + Math.random() * 0.1, 1);
                        instance.setProgress(progress);

                        if (progress === 1) {
                            instance.stop();
                            clearInterval(interval);
                        }
                    },
                    200);
                }
            });

            // You can control loading explicitly using the JavaScript API
            // as outlined below:
            // var l = Ladda.create( document.querySelector( 'button' ) );
            // l.start();
            // l.stop();
            // l.toggle();
            // l.isLoading();
            // l.setProgress( 0-1 );
            
        </script>
    </body>

</html>

ladda-themeless.min.css

/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */.ladda-button {
	position: relative
}

.ladda-button .ladda-spinner {
	position: absolute;
	z-index: 2;
	display: inline-block;
	width: 32px;
	height: 32px;
	top: 50%;
	margin-top: -16px;
	opacity: 0;
	pointer-events: none
}

.ladda-button .ladda-label {
	position: relative;
	z-index: 3
}

.ladda-button .ladda-progress {
	position: absolute;
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.2);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: .1s linear all!important;
	-moz-transition: .1s linear all!important;
	-ms-transition: .1s linear all!important;
	-o-transition: .1s linear all!important;
	transition: .1s linear all!important
}

.ladda-button[data-loading] .ladda-progress {
	opacity: 1;
	visibility: visible
}

.ladda-button,.ladda-button .ladda-label,.ladda-button .ladda-spinner {
	-webkit-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-moz-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-ms-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-o-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important
}

.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-label,.ladda-button[data-style=zoom-out] .ladda-spinner {
	-webkit-transition: .3s ease all!important;
	-moz-transition: .3s ease all!important;
	-ms-transition: .3s ease all!important;
	-o-transition: .3s ease all!important;
	transition: .3s ease all!important
}

.ladda-button[data-style=expand-right] .ladda-spinner {
	right: 14px
}

.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size=xs] .ladda-spinner {
	right: 4px
}

.ladda-button[data-style=expand-right][data-loading] {
	padding-right: 56px
}

.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size=xs] {
	padding-right: 40px
}

.ladda-button[data-style=expand-left] .ladda-spinner {
	left: 14px
}

.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size=xs] .ladda-spinner {
	left: 4px
}

.ladda-button[data-style=expand-left][data-loading] {
	padding-left: 56px
}

.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size=xs] {
	padding-left: 40px
}

.ladda-button[data-style=expand-up] {
	overflow: hidden
}

.ladda-button[data-style=expand-up] .ladda-spinner {
	top: -32px;
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=expand-up][data-loading] {
	padding-top: 54px
}

.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
	opacity: 1;
	top: 14px;
	margin-top: 0
}

.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size=xs] {
	padding-top: 32px
}

.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size=xs] .ladda-spinner {
	top: 4px
}

.ladda-button[data-style=expand-down] {
	overflow: hidden
}

.ladda-button[data-style=expand-down] .ladda-spinner {
	top: 62px;
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size=xs] .ladda-spinner {
	top: 40px
}

.ladda-button[data-style=expand-down][data-loading] {
	padding-bottom: 54px
}

.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size=xs] {
	padding-bottom: 32px
}

.ladda-button[data-style=slide-left] {
	overflow: hidden
}

.ladda-button[data-style=slide-left] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-left] .ladda-spinner {
	left: 100%;
	margin-left: -16px
}

.ladda-button[data-style=slide-left][data-loading] .ladda-label {
	opacity: 0;
	left: -100%
}

.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
	opacity: 1;
	left: 50%
}

.ladda-button[data-style=slide-right] {
	overflow: hidden
}

.ladda-button[data-style=slide-right] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-right] .ladda-spinner {
	right: 100%;
	margin-left: -16px
}

.ladda-button[data-style=slide-right][data-loading] .ladda-label {
	opacity: 0;
	left: 100%
}

.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
	opacity: 1;
	left: 50%
}

.ladda-button[data-style=slide-up] {
	overflow: hidden
}

.ladda-button[data-style=slide-up] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-up] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	margin-top: 1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-label {
	opacity: 0;
	top: -1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
	opacity: 1;
	margin-top: -16px
}

.ladda-button[data-style=slide-down] {
	overflow: hidden
}

.ladda-button[data-style=slide-down] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-down] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	margin-top: -2em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-label {
	opacity: 0;
	top: 1em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
	opacity: 1;
	margin-top: -16px
}

.ladda-button[data-style=zoom-out] {
	overflow: hidden
}

.ladda-button[data-style=zoom-out] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5)
}

.ladda-button[data-style=zoom-out] .ladda-label {
	position: relative;
	display: inline-block
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5)
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}

.ladda-button[data-style=zoom-in] {
	overflow: hidden
}

.ladda-button[data-style=zoom-in] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2)
}

.ladda-button[data-style=zoom-in] .ladda-label {
	position: relative;
	display: inline-block
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
	opacity: 0;
	-webkit-transform: scale(2.2);
	-moz-transform: scale(2.2);
	-ms-transform: scale(2.2);
	-o-transform: scale(2.2);
	transform: scale(2.2)
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}

.ladda-button[data-style=contract] {
	overflow: hidden;
	width: 100px
}

.ladda-button[data-style=contract] .ladda-spinner {
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=contract][data-loading] {
	border-radius: 50%;
	width: 52px
}

.ladda-button[data-style=contract][data-loading] .ladda-label {
	opacity: 0
}

.ladda-button[data-style=contract][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=contract-overlay] {
	overflow: hidden;
	width: 100px;
	box-shadow: 0 0 0 3000px rgba(0,0,0,0)
}

.ladda-button[data-style=contract-overlay] .ladda-spinner {
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=contract-overlay][data-loading] {
	border-radius: 50%;
	width: 52px;
	box-shadow: 0 0 0 3000px rgba(0,0,0,.8)
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
	opacity: 0
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
	opacity: 1
}

如圖：

在這裡插入圖片描述

相關文章