PHP Kendo\UI\ProgressBar Examples

Example #1

File: index.php Project: neevan1e/Done

function progressBar($name)
{
    $pb = new \Kendo\UI\ProgressBar($name);
    $animation = new \Kendo\UI\ProgressBarAnimation();
    $animation->duration(600);
    $pb->type('percent')->animation($animation);
    return $pb;
}

Example #2

File: customlabel.php Project: neevan1e/Done

require_once '../include/header.php';
?>

<div id="example" class="k-content">
    <div class="demo-section">
        <h2>Reset Password</h2>
        <div>
            <ul class="forms">
                <li>
                    <label>New Password</label>
                    <input id="userPass" type="password" name="userPass" value="" class="k-textbox" style="width: 260px;" />
                </li>
                <li>
                    <label>Password strength</label>
                    <?php 
$pb = new \Kendo\UI\ProgressBar('passStrength');
$pb->type('value')->max(9)->animation(false)->change('onChange');
echo $pb->render();
?>
                </li>
                <li>
                    <label></label>
                    <button id ="submitButton" class="k-button">Done</button>
                </li>
            </ul>
        </div>
    </div>

    <?php 
require_once '../include/footer.php';
?>

Example #3

File: api.php Project: neevan1e/Done

                    <button class="k-button" id="getProgressBarValue">Get value</button>
                </li>
            </ul>
        </div>
        <div class="config-section">
            <span class="configHead">Indeterminate</span>
            <ul class="options">
                <li>
                    <button class="k-button" id="setIndeterminate">Set indeterminate</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-section">
        <?php 
$pb = new \Kendo\UI\ProgressBar('progressBar');
$animation = new \Kendo\UI\ProgressBarAnimation();
$animation->duration(400);
$pb->min(0)->max(100)->type('value')->animation($animation);
echo $pb->render();
?>
    </div>

     <?php 
require_once '../include/footer.php';
?>

    <script>
        $(document).ready(function () {
            var pb = $("#progressBar").data("kendoProgressBar");

Example #4

File: chunk.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>

<div id="example" class="k-content">
    <div class="demo-section">
        <h2>Profile Completeness</h2>
        <div class="completenessLevel">
            <h2>40%</h2>
            <?php 
$pb = new \Kendo\UI\ProgressBar('profileCompleteness');
$pb->type('chunk')->chunkCount(5)->min(0)->max(5)->value(2);
echo $pb->render();
?>
        </div>
    </div>

    <div class="demo-section">
        <h2>Please fill your details</h2>
        <div>
            <ul class="forms">
                <li>
                    <label>First Name</label>
                    <input type="text" name="firstName" value="" class="k-textbox" style="width: 265px;" />
                </li>
                <li>
                    <label>Last Name</label>
                    <input type="text" name="lastName" value="" class="k-textbox" style="width: 265px;" />
                </li>

Example #5

File: right-to-left-support.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>


<div id="example" class="k-content">
    <div class="k-rtl demo-section">
        <h3 class="title">ProgressBar</h3>
        <?php 
$pb = new \Kendo\UI\ProgressBar('progressBar');
$animation = new \Kendo\UI\ProgressBarAnimation();
$animation->duration(600);
$pb->type('percent')->animation($animation)->complete('onComplete');
echo $pb->render();
?>
        <button id="startProgress" class="k-button">Start progress</button>
    </div>

    <?php 
require_once '../include/footer.php';
?>

    <script>
        $("#startProgress").click(function () {
            if (!$(this).hasClass("k-state-disabled")) {
                $(this).addClass("k-state-disabled");

                progress();
            }

Example #6

File: vertical.php Project: neevan1e/Done

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>

<div id="example" class="k-content">
    <div class="demo-section">
        <div class="loading">
            <?php 
$pbtotal = new \Kendo\UI\ProgressBar('totalProgressBar');
$pbtotal->type('chunk')->chunkCount(4)->min(0)->max(4)->orientation('vertical')->complete('onTotalComplete');
echo $pbtotal->render();
?>

            <?php 
$pb = new \Kendo\UI\ProgressBar('loadingProgressBar');
$pb->orientation('vertical')->showStatus(false)->animation(false)->change('onChange')->complete('onComplete');
echo $pb->render();
?>
        </div>
        <div class="loadingInfo">
            <h2>Loading styles</h2>
            <div class="statusContainer">
                <p>
                Loaded: <span class="loadingStatus">0%</span> <br />
                Item <span class="chunkStatus">1</span> of 4
                </p>
            </div>
            <button class="k-button reloadButton">Reload</button>
        </div>
    </div>

Example #7

File: events.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>

<div id="example" class="k-content">
    <div class="demo-section">
        <h3 class="title">ProgressBar</h3>
        <?php 
$pb = new \Kendo\UI\ProgressBar('progressBar');
$pb->type('percent')->min(0)->max(10)->change('onChange')->complete('onComplete');
echo $pb->render();
?>
        <button id="startProgress" class="k-button">Start progress</button>
    </div>
    <div class="demo-section">
        <h3 class="title">Console log</h3>
        <div class="console"></div>
    </div>

     <?php 
require_once '../include/footer.php';
?>

    <script>
        function onChange(e) {
            kendoConsole.log("Change event :: value is " + e.value);
        }

        function onComplete(e) {