JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<div ng-app="myApp" ng-controller="c">
  <tasks-progress></tasks-progress>
    
</div>

CSS

/*UPLOAD PROGRESS BOX*/

.progressUploadContainer
{
    width:350px;
    height:300px;
    background-image:url(https://demo-project-alanz2223.c9.io/images/noisyBg.png);
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:8px;
    border:1px solid rgb(240,240,240);
    padding:5px;
    box-sizing:border-box;
    box-shadow:0 0 4px rgb(220,220,220);
}

.progressHeaderContainer
{
    width:100%;
    height:auto;
    box-sizing:border-box;
    text-align:center;
    margin-bottom:15px;
    padding-top:10px;
}

.progressUploadText
{
    font-size:1.2em;
    color:rgb(126,236,86);
}

.progressUploadTaskSection
{
   width:85%;
   height:240px;
   margin-right:auto;
   margin-left:auto;
   background:rgb(250,250,250);
   box-sizing:border-box;
   
}
.progressUploadTaskContainer
{
    width:100%%;
    height:auto;
    background:rgb(250,250,250);
    border:1px solid #616161;
}
.progressImageContainer
{
    width:20px;
    height:20px;
    display:inline-block;
    box-sizing:border-box;
}
.progressEntryTextContainer
{
    width:calc(100% - 20px);
    height:auto;
    box-sizing:border-box;
    text-align:left;
    display:inline-block;
    padding-left:15px;
}
.progressEntryText
{
    font-size:1.1em;
    color:#3498DB;
}

/**/

JavaScript

var mod = angular.module('myApp',['Progress']);

mod.controller('c',function($scope){

    $scope.showProgressBox = true;

});



var progress = angular.module('Progress', ['ngAnimate']);

progress.directive('tasksProgress',function($http){
					
					var obj = {
					
						restrict : 'E',
						template: '<div class="progressUploadContainer" ng-show="showProgressBox">'+
									'<div class="progressHeaderContainer">'+
										'<span class="progressUploadText">Uploading Files</span>'+
									'</div>'+

									'<div class="progressUploadTaskSection">'+

										'<div class="progressUploadTaskContainer" ng-repeat="task in tasks">'+
											'<div class="progressImageContainer">'+
												'<img class="progressImage" ng-if="task.status === \'pending\' " src="https://demo-project-alanz2223.c9.io/images/pending.png"></img>'+
												'<img class="progressImage" ng-if="task.status === \'uploading\' " src="https://demo-project-alanz2223.c9.io/images/loading.gif"></img>'+
												'<img class="progressImage" ng-if="task.status === \'success\' " src="https://demo-project-alanz2223.c9.io/images/nextgenCheckmark3.png"></img>'+
											'</div>'+
											'<div class="progressEntryTextContainer">'+
												'<span class="progressEntryText">{{task.name}}</span>'+
											'</div>'+
										'</div>'+

									'</div>'+

								'</div>',
								link : function(scope)
								{
								
									scope.tasks = [{name : 'jon 15', status : 'success'}, {name : 'rhythm', status:'success' },
									{name :'georf', status:'uploading'},{name : 'zetta', status:'pending'}, {name :'bolin',status:'pending'}];
								
									scope.startProgressBox = function(elements,interval,cond,path)
									{
										scope.tasks = elements;
                                        
										if(!scope.hasInitProgressScrolls)
										{
											scope.initScrollbars();
											scope.hasInitProgressScrolls =...