jQuery

【jQuery】jQueryを使ったパーセンテージプリローダー。Percentage Preloader

August 21, 2016
Percentage preloader

Percentage PreloaderはウェブサイトにjQueryを使ったパーセンテージプリローダーのロード画面を作成します。

jQuery

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/sPreloader.js"></script>

HTML

<div id="main-preloader" class="main-preloader semi-dark-background">
    <div class="main-preloader-inner center">
        <h1 class="preloader-percentage center">
            <span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
            <span class="percentage">%</span>
        </h1>
        <div class="preloader-bar-outer">
            <div class="preloader-bar"></div> <!-- Percentage Precess Bar -->
        </div>
    </div>
</div>

Custom JS

$('body').jpreLoader({
    preMainSection:     '#main-preloader',
    prePerText:         '.preloader-percentage-text',
    preBar:             '.preloader-bar',
});