Bootstrap和ladda.js

風靈使發表於2018-12-31

<!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
}

如圖：

在這裡插入圖片描述

ladda.js原始碼
2018-12-31
JS原始碼
使用.NET MVC和Bootstrap
2019-01-03
MVCboot
vue引入bootstrap和fontawesome
2018-02-11
Vueboot
bootstrap提示和彈出框
2016-10-30
boot
Vue和Bootstrap的整合之路
2017-11-12
Vueboot
bootstrap和bootstrap-select去除藍色邊框outline
2016-07-11
boot
bootstrap框架基礎和常用元件
2021-09-09
boot框架元件
【BootStrap】--前端利器BootStrap
2015-08-10
boot前端
通用分頁-基於bootstrap和jQuery
2021-09-09
bootjQuery
Bootstrap和Tailwind CSS之間的差異？
2022-12-08
bootAICSS
Bootstrap
2020-10-09
boot
Bootstrap++：bootstrap-select 使用
2020-07-28
boot
bootstrap36-Bootstrap下拉選單
2017-11-12
boot
Bootstrap系列 -- 1. 如何使用Bootstrap
2015-06-19
boot
(五)Bootstrap 輔助組和響應式工具
2017-12-18
boot
bootstrap39-Bootstrap下拉選單dropdown
2017-11-12
boot
bootstrap學習筆記 Bootstrap 列表組
2015-05-21
boot筆記
Bootstrap - viewport
2018-01-27
bootView
bootstrap – form
2016-09-06
bootORM
bootstrap常用
2016-06-21
boot
Bootstrap框架
2013-12-16
boot框架
bootstrap 警告
2015-05-20
boot
bootstrap外掛學習-bootstrap.modal.js
2018-12-31
bootJS
jQuery UI Bootstrap：在jQuery UI上整合Bootstrap
2015-05-10
jQueryUIboot
基於 Bootstrap 和 jQuery 的 checkbox 的應用
2020-01-15
bootjQuery
用 jQuery 和 Bootstrap 在 WordPress 中新增進度條
2019-02-26
jQueryboot
利用Bootstrap Paginator外掛和knockout.js
2021-09-09
bootJS
Bootstrap檔案上傳元件應用：bootstrap fileinput
2020-10-08
boot元件
Web 開源 CSS 框架 Bootstrap 文件、Bootstrap 下載
2015-03-27
WebCSS框架boot
Bootstrap 簡介
2018-09-18
boot
Bootstrap雙列表
2019-01-04
boot
BootStrap selectpicker
2017-04-04
boot
BootStrap小結
2018-04-19
boot
Bootstrap Mega Menu
2017-10-28
boot
Bootstrap框架-----排版
2017-09-24
boot框架
Bootstrap初學
2017-04-30
boot
Bootstrap元件 - Well
2017-06-16
boot元件
bootstrap1
2017-11-15
boot

Bootstrap和ladda.js

ladda-themeless.min.css

如圖：

相關文章