<%@ Page Title="Striped Progress Bar" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Striped Progress Bar - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Striped Progress Bar</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Striped Animated Progress Bar</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A Bootstrap-style striped and animated progress bar. The diagonal stripes
            animate continuously while the upload is in progress.
        </p>

        <style>
            .striped-bar {
                width: 100%; height: 24px;
                background: #e5e7eb; border-radius: 0.375rem;
                overflow: hidden; margin-top: 1rem; display: none;
            }
            .striped-fill {
                height: 100%; width: 0%;
                background-color: #0d6efd;
                background-image: linear-gradient(
                    45deg,
                    rgba(255,255,255,.2) 25%, transparent 25%,
                    transparent 50%, rgba(255,255,255,.2) 50%,
                    rgba(255,255,255,.2) 75%, transparent 75%,
                    transparent
                );
                background-size: 1rem 1rem;
                animation: stripeAnim 1s linear infinite;
                transition: width 0.2s ease;
                border-radius: 0.375rem;
            }
            @keyframes stripeAnim {
                from { background-position: 1rem 0; }
                to { background-position: 0 0; }
            }
        </style>

        <div id="stripedUploader"></div>
        <div class="striped-bar" id="stripedBar">
            <div class="striped-fill" id="stripedFill"></div>
        </div>

        <div class="code-panel">
            <pre><code>.striped-fill {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.2) 75%, transparent 75%);
  background-size: 1rem 1rem;
  animation: stripeAnim 1s linear infinite;
}

onTaskProgress: function(task, pct) {
  fill.style.width = pct + '%';
}</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var bar = document.getElementById('stripedBar');
        var fill = document.getElementById('stripedFill');
        AjaxUploader.create(document.getElementById('stripedUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onTaskStart: function () { bar.style.display = 'block'; fill.style.width = '0%'; },
            onTaskProgress: function (task, pct) { fill.style.width = pct + '%'; },
            onTaskComplete: function () { fill.style.width = '100%'; }
        });
    })();
</script>
</asp:Content>
