CodePen

HTML

            
              <div class="wrapper">
  <div class="top top1"></div>
  <div class="top top2"></div>
  <div class="center">
  	<div class="load-bar">
    	<div class="inner-load-bar"></div>
    </div>
    <div class="percents">
      <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
        <li>70</li>
        <li>71</li>
        <li>72</li>
        <li>73</li>
        <li>74</li>
        <li>75</li>
        <li>76</li>
        <li>77</li>
        <li>78</li>
        <li>79</li>
        <li>80</li>
        <li>81</li>
        <li>82</li>
        <li>83</li>
        <li>84</li>
        <li>85</li>
        <li>86</li>
        <li>87</li>
        <li>88</li>
        <li>89</li>
        <li>90</li>
        <li>91</li>
        <li>92</li>
        <li>93</li>
        <li>94</li>
        <li>95</li>
        <li>96</li>
        <li>97</li>
        <li>98</li>
        <li>99</li>
        <li>100</li>
      </ul>
    </div>
    <p>Thanks for your patience...</p>
  </div>
  <div class="bottom"></div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Press+Start+2P);

* { box-sizing:border-box; }

.wrapper {
  width:200px;
  margin:80px auto;
  position:relative;
}

.top {
  background:#d5cdca;
  width:100%;
  height:30px;
  border:1px solid #9f8e86;
}

.top1 {
  box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
  background-image: linear-gradient(45deg, 
  #d5cdca 25%, #9f8e86 25%, #9f8e86 50%,
	#d5cdca 50%, #d5cdca 75%, #9f8e86 75%, #9f8e86);
	background-size:60px 60px;
  position:absolute;
  transform:rotate(-20deg);
  transform-origin:0% 100%;
  z-index:2;
}

.top1:before {
 	content:"";
  display:block;
  position:absolute;
  width:10px;
  height:10px;
  background:#f1eded;
  border-radius:50%;
  box-shadow:-1px 1px 0 rgba(0,0,0,0.1);
  bottom:5px;
  left:5px;
}

.top1:after {
 	content:"";
  display:block;
  position:absolute;
  width:1px;
  height:10px;
  background:#9f8e86;
  bottom:5px;
  left:10px;
  transform:rotate(-25deg);
}

.top2 {
 	box-shadow:2px 2px 0 rgba(0,0,0,0.1);
  position:relative;
  background-image: linear-gradient(-45deg,
	#9f8e86 25%, #d5cdca 25%, #d5cdca 50%,
	#9f8e86 50%, #9f8e86 75%, #d5cdca 75%, #d5cdca);
	background-size:60px 60px;
}

.center {
  background:#dbd1ce;
  width:95%;
  margin:0 auto;
  border:1px solid #9f8e86;
  padding:10px;
  border-top:none;
  border-bottom:none;
  position:relative;
  z-index:2;
}

.load-bar {
 	height:20px;
  width:100%;
  background:white;
  border:1px solid #9f8e86;
  border-radius:20px;
  box-shadow:inset 1px 2px 1px rgba(0,0,0,0.2);
  margin-bottom:5px;
  overflow:hidden;
}

.inner-load-bar {
 	width:0;
  height:100%;
  background:red;
  animation:loader 10s infinite linear;
  box-shadow:inset 1px 2px 1px rgba(0,0,0,0.2);
}

.percents {
  background:white;
 	float:right; 
  width:50%;
  border-radius:20px;
  border:1px solid #9f8e86;
  box-shadow:inset 1px 2px 1px rgba(0,0,0,0.2);
  margin-bottom:10px;
  text-align:right;
  padding-right:15px;
  height:25px;
  color:#aa9090;
  font-family:'99helvetica';
  overflow:hidden;
}

ul {
 	position:relative; 
  font-family: 'Press Start 2P', cursive;
  font-size:12px;
  animation: percents 10s steps(101,end) infinite ;
} 

li {
 	line-height:25px; 
  height: 25px;
}

li:after {
 	content:"%";  
}

p {
 	clear:both; 
  color:#534642;
  font-size:11px;
  text-align:center;
}

.bottom {
 	width:100%;
  border:1px solid #9f8e86;
  background:#b4a6a0;
  height:20px;
  position:relative;
}

.bottom:before,
.bottom:after {
 	content:"";
  display:block;
  position:absolute;
  width:10px;
  height:10px;
  background:#f1eded;
  border-radius:50%;
  box-shadow:-1px 1px 0 rgba(0,0,0,0.1);
  top:5px;
  left:7px;
}

.bottom:after {
 	left:auto;
  right:7px;
}

.center:after,
.center:before {
  content:"";
  display:block;
  position:absolute;
  width:1px;
  height:10px;
  background:#9f8e86;
  bottom:-16px;
  left:7px;
  transform:rotate(-25deg);
}

.center:after {
 	left:auto;
  right:7px;
  transform:rotate(5deg);
}

@-moz-keyframes loader {
 	from { width:0; }
  to { width:100%; }
}

@-webkit-keyframes loader {
 	from { width:0; }
  to { width:100%; }
}

@-moz-keyframes percents {
 	from { top:0; }
  to { top:-2525px; }
}

@-webkit-keyframes percents {
 	from { top:0; }
  to { top:-2525px; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................