Animated Pie Progress Bar With Pure CSS – Circles.css

Preview:

Description:

A CSS library for generating animated, pie chart-like progress bars using pure HTML, CSS and CSS3 animations.

How to use it:

Insert the main style sheet circles.css into the webpage.

<link rel="stylesheet" href="circles.css">

Generate progress bars to present the percentage values.

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