"mac popup dialog"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/arendon/pen/DvntE?q=mac&limit=all&type=type-pens" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Cabin); html { height: 100%; } body { height: 100%; position: relative; background: url(https://unsplash.it/1024/768/?blur); -webkit-background-size: cover; background-size: cover; font-family: "Cabin"; } h1 { letter-spacing: 1px; color: #eee; text-shadow: 0 1px 2px #000; text-align: center; font: bold 2.2em/1.5em 'Cabin', sans-serif; } .centered { margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #titlebar { width: 100%; height: 30px; background-color: #fff; background: -webkit-linear-gradient(top, #d2d2d2, #a9a9a9); border-radius: 10px 10px 0 0; margin-top: -32px; } #titlebar h2 { color: #303030; font: bold 1.3em/1.5em 'Cabin'; text-shadow: 0 1px 1px #d2d2d2; } #dialog { color: #fff; background-color: #27252c; background: -webkit-linear-gradient(top, #27252c, #34323b); width: calc(100% - 100px); min-width: 400px; height: 200px; border-radius: 0 0 10px 10px; border-top: 2px solid #43404c; text-align: center; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.6); } #size, #etr { font: normal 0.8em 'Cabin', sanas-serif; display: inline-block; text-shadow: 1px 1px #000; } progress { margin: 0 10px; display: inline-block; width: 60%; border-radius: 10px; } progress::-webkit-progress-bar { height: 13px; border: 1px solid #2b2931; border-radius: 10px; background-color: #333039; box-shadow: 0 1px 0 #4d4856; } progress::-webkit-progress-value { height: 12px; background-color: #0077c6; border: 1px solid #30a1e1; border-radius: 10px; box-shadow: 0 0 20px -1px #005db9; } #help { font-weight: bold; padding: 7px 11px; background: -webkit-linear-gradient(top, #f5f5f5, #ededed); color: #000; border: 5px solid #323038; border-radius: 100%; text-align: left; position: absolute; top: calc(100% - 55px); left: 15px; box-shadow: 0 1px 2px #423e48; } .file { margin-top: 30px; margin-bottom: 20px; text-shadow: 0 1px 1px #000; } .path { color: #86818c; margin-top: 10px; text-shadow: 0 1px 1px #000; } .button { background: -webkit-linear-gradient(top, #474350, #34313a); display: inline-block; position: relative; margin: 25px auto; border: 1px solid #2d2b33; border-radius: 4px; padding: 10px 20px; text-shadow: 0 1px 0 #333; box-shadow: inset 0 2px 2px #55515d; } .button:hover { cursor: pointer; box-shadow: inset 0 2px 2px #55515d, 0 0 25px -6px #55515d; } </style></head><body> <div id="dialog" class="centered" ng-app> <div id="titlebar"><h2>Clonar Disco</h2></div> <p class="file">Clonando "Lion"</p> <p id="size">85.5 GB</p> <progress id="bar" value="0" max="100" ng-model="prog"></progress> <p id="etr">{{prog}}</p> <p class="path">/home/username/Documents/cssPractices</p> <div class="button">Cancelar</div> <div id="help">?</div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script> <script >$(document).ready(function() { var progressbar = $('#bar'), max = progressbar.attr('max'), time = (100/max)*600, value = progressbar.val(); var loading = function() { value += 1; addValue = progressbar.val(value); if (value == max) { clearInterval(animate); } }; var animate = setInterval(function() { loading(); }, time); }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: