<%@ 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>
