<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" id="uploadPanel"> <input style="display:none;" id="selectFiles" type="file" multiple="multiple"> <label class="btn btn-warning pull-right" id="selectButton" for="selectFiles">Dosyaları Seç</label> <button id="uploadButton" class="btn btn-success pull-right">Dosyaları Yükle</button> <div id="progressBar" class="progress"> <div id="overBar" class="bar"><center>47</center></div> </div> </div> <div class="row" > <div id="filelist"> <span> <b>Dosya Adı:</b> dövlet_bize_bahmiyi.avi </span><br/> <span> <b>Dosya Boyutu:</b> 56 MB</span><br/> <div class="progress" id="fileprogress"> <div id="fileBar1" class="bar"><center>70</center></div> </div> </div> <div id="filelist"> <span> <b>Dosya Adı:</b> sakarya_universitesi.png </span><br/> <span> <b>Dosya Boyutu:</b> 128 KB</span><br/> <div class="progress" id="fileprogress"> <div id="fileBar2" class="bar"><center>48</center></div> </div> </div> <div id="filelist"> <span> <b>Dosya Adı:</b> ula_okul_bitmiyi.jpg </span><br/> <span> <b>Dosya Boyutu:</b> 134 KB</span><br/> <div class="progress" id="fileprogress"> <div id="fileBar3" class="bar"><center>23</center></div> </div> </div> </div> </div>

#uploadPanel { box-shadow: 0 0 10px 2px rgba(144, 130, 130, 0.57); padding-top: 40px; padding-bottom: 40px; margin-top:40px; } #selectButton{ margin-right:10px; } #uploadButton{ display:inline-block; margin-left:5px; margin-right:5px; } #progressBar { margin-top: 5px; margin-left: 10px; } #overBar { background-color: #52D3AA; height: -webkit-fill-available; width: 47%; color:#fff; } #filelist { box-shadow: 0 0 10px 2px rgba(144, 130, 130, 0.57); padding: 30px 10px 5px 10px; margin-top: 10px; font-size:16px; font-family: "times new roman", Arial, sans-serif; color: rgba(0, 0, 0, 0.5); } #fileBar1{ color:#fff; width:70%; background-color:#52D3AA; height: -webkit-fill-available; } #fileBar2{ color:#fff; width:48%; background-color:#52D3AA; height: -webkit-fill-available; } #fileBar3{ color:#fff; width:23%; background-color:#52D3AA; height: -webkit-fill-available; } #fileprogress{ margin-top:3px; }