<div id="wrapper">
  <div class="hold">
    <div class="pie na"></div>
    <div class="pie fill"></div>
  </div>
  
  <div class="hold gt2">
    <div class="pie na"></div>
  </div>
  
  <div class="mask">
    <p>loading...</p>
    <div class="cell">
      <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>
  </div>
  <div class="mask clear">complete</div>
</div>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Baumans);

* { box-sizing:border-box; }

#wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin:30px auto;
  border-radius:50%;
  border:10px solid white;
  box-shadow: 0 0 0 5px #C6C6C6;
}

.mask {
  border-radius:50%;
  background:white;
  width:180px;
  height:180px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-90px;
  margin-top:-90px;
  position:absolute;
  text-align:center;
  color:#cecece;
  font-size:30px;
  font-family:'Baumans';
}

.mask.clear {
  line-height:180px;
  opacity:0;
  animation-name: opa;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-delay: 9s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.mask p {
  padding:50px 0 20px;
}


.mask ul {
   list-style:none;
  position:relative;
  animation: percents 10s steps(101,end) 1;
}

.cell {
  height:25px;
  width:100%;
  overflow:hidden;
}

.mask li {
 	color:#ff6300;
  height:25px;
  line-height: 25px;
} 

.mask li:after {
 	content:"%"; 
}

.clear {
 	animation:opa 0.2s 10s 1; 
}

.hold {
  position:absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px,200px,200px,100px);
  background:#c6c6c6;
  border-radius:50%;
}

.pie {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px,100px,200px,0px);
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background:#ff6300;
}

.na {
	animation: rota 5s linear 1;
}

.fill {
	background:#ff6300;
  opacity:0;
  transform:rotate(180deg);
  animation-name: opa;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-delay: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  
}



.gt2 {
 	transform:rotate(180deg); 
}

.gt2 .na {
	animation: rota 5s 5s linear 1;  
  animation-name: rota;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

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

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

@-moz-keyframes rota {
  from { transform:rotate(0deg); }
  to { transform:rotate(180deg); }
}

@-webkit-keyframes rota {
  from { transform:rotate(0deg); }
  to { transform:rotate(180deg); }
}

@-moz-keyframes opa {
 	from { opacity:0; }
  to { opacity:1; }
}

@-webkit-keyframes opa {
 	from { opacity:0; }
  to { opacity:1; }
}
View Compiled
/* NO JS \o/ */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js