Fork: 0
MrOlsen / ubFramework
Transfer to URL with SHA Find file
Newer
Older
ubFramework / Portal / docroot / user / views / text_spinners.html
@Christopher W. Olsen Christopher W. Olsen on 10 Dec 2017 12 KB Cleaning Up Making It A Sub Module
Raw Blame History 
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Text spinners</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Text spinners</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Text spinners</h5>
                </div>

                <div class="ibox-content">

                    <p class="font-bold">
                        Pure text, CSS only, font independent, inline loading indicators.
                    </p>

                    <p>
                        This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web. <a href="http://tawian.io/text-spinners/" target="_blank">http://tawian.io/text-spinners/</a>
                    </p>


                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Ellip </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading"></span>
                    </div>
                    <code> &lt;span class="loading"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Dots</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading dots"></span>
                    </div>
                    <code> &lt;span class="loading dots"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Dots 2</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading dots2"></span>
                    </div>
                    <code> &lt;span class="loading dots2"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Dots 3 </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading dots3"></span>
                    </div>
                    <code> &lt;span class="loading dots3"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Line</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading line"></span>
                    </div>
                    <code> &lt;span class="loading line"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Line 2</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading line2"></span>
                    </div>
                    <code> &lt;span class="loading line2"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Lifting </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading lifting"></span>
                    </div>
                    <code> &lt;span class="loading lifting"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Hamburger</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading hamburger"></span>
                    </div>
                    <code> &lt;span class="loading hamburger"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Bar</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading bar"></span>
                    </div>
                    <code> &lt;span class="loading bar"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Bar 2 </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading bar2"></span>
                    </div>
                    <code> &lt;span class="loading bar2"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Circle</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading circle"></span>
                    </div>
                    <code> &lt;span class="loading circle"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Triangle</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading triangle"></span>
                    </div>
                    <code> &lt;span class="loading triangle"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Bullet </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading bullet"></span>
                    </div>
                    <code> &lt;span class="loading bullet"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Rhomb</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading rhomb"></span>
                    </div>
                    <code> &lt;span class="loading rhomb"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Toggle</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading toggle"></span>
                    </div>
                    <code> &lt;span class="loading toggle"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Box bounce </h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading box-bounce"></span>
                    </div>
                    <code> &lt;span class="loading box-bounce"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Star</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading star"></span>
                    </div>
                    <code> &lt;span class="loading star"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Words</h5>
                </div>
                <div class="ibox-content text-center">
                    <div class="h1 m-t-xs text-navy">
                        <span class="loading words"></span>
                    </div>
                    <code> &lt;span class="loading words"&gt;&lt;/span&gt; </code>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Example usage with Bootstrap button</h5>
                </div>
                <div class="ibox-content float-e-margins text-center">

                    <button class="btn btn-default">Loading <span class="loading"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading dots"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading dots2"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading dots3"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading line"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading bar"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading triangle"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading bar2"></span> </button>
                    <button class="btn btn-default">Loading <span class="loading bullet"></span> </button>
                    <br/>
                    <button class="btn btn-primary">Loading <span class="loading triangles"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading beam"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading arrow"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading open-circle"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading rhomb"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading star"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading triangle"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading circle"></span> </button>
                    <button class="btn btn-primary">Loading <span class="loading fish"></span> </button>


                </div>
            </div>
        </div>
    </div>

</div>