<%@ 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.2 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> <div class="demo-expect"><strong>What you should see:</strong> the animated striped variant of the bar - purely presentational, identical events underneath.</div> <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 = clampPercent(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');
 var host = document.getElementById('stripedUploader');
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onTaskStart: function () { if (bar) bar.style.display = 'block'; if (fill) fill.style.width = '0%'; },
 onTaskProgress: function (task, pct) { if (fill) fill.style.width = clampPercent(pct) + '%'; },
 onTaskComplete: function () { if (fill) fill.style.width = '100%'; }
 });
 })();
</script>
</asp:Content>
