CodePen Embed - calendar loader

<div class='refresh'>
  <svg height='50' viewBox='0 0 50 50' width='50' xmlns='http://www.w3.org/2000/svg'>
    <path d='M26.083 13C32.665 13 38 18.374 38 25.003c0 6.5-5.13 11.794-11.534 11.997v-2.184c5.207-.202 9.367-4.518 9.367-9.813 0-5.424-4.365-9.82-9.75-9.82-4.83 0-8.84 3.54-9.615 8.183H18.5l-3.25 3.82-3.25-3.82h2.277C15.07 17.51 20.053 13 26.083 13z' fill-rule='evenodd' fill='#191747'>
  </svg>
</div>
<div class='main-ctr'>
  <div class='calendar-ctr'>
    <div class='top-ctr'>
      <div class='top top-0'></div>
      <div class='top top-1'>
        <div class='number'>1</div>
      </div>
      <div class='top top-2'>
        <div class='number'>2</div>
      </div>
      <div class='top top-3'>
        <div class='number'>3</div>
      </div>
      <div class='top top-4'>
        <div class='number'>4</div>
      </div>
      <div class='top top-5'>
        <div class='number'>5</div>
      </div>
      <div class='top top-6'>
        <div class='number'>6</div>
      </div>
      <div class='top top-7'>
        <div class='number'>7</div>
      </div>
      <div class='top top-8'>
        <div class='number'>8</div>
      </div>
      <div class='top top-9'>
        <div class='number'>9</div>
      </div>
      <div class='top top-10'>
        <div class='number'>10</div>
      </div>
      <div class='top top-11'>
        <div class='number'>11</div>
      </div>
      <div class='top top-12'>
        <div class='number'>12</div>
      </div>
      <div class='top top-13'>
        <div class='number'>13</div>
      </div>
      <div class='top top-14'>
        <div class='number'>14</div>
      </div>
      <div class='top top-15'>
        <div class='number'>15</div>
      </div>
      <div class='top top-16'>
        <div class='number'>16</div>
      </div>
      <div class='top top-17'>
        <div class='number'>17</div>
      </div>
      <div class='top top-18'>
        <div class='number'>18</div>
      </div>
      <div class='top top-19'>
        <div class='number'>19</div>
      </div>
      <div class='top top-20'>
        <div class='number'>20</div>
      </div>
      <div class='top top-21'>
        <div class='number'>21</div>
      </div>
      <div class='top top-22'>
        <div class='number'>22</div>
      </div>
      <div class='top top-23'>
        <div class='number'>23</div>
      </div>
      <div class='top top-24'>
        <div class='number'>24</div>
      </div>
      <div class='top top-25'>
        <div class='number'>25</div>
      </div>
      <div class='top top-26'>
        <div class='number'>26</div>
      </div>
      <div class='top top-27'>
        <div class='number'>27</div>
      </div>
      <div class='top top-28'>
        <div class='number'>28</div>
      </div>
      <div class='top top-29'>
        <div class='number'>29</div>
      </div>
      <div class='top top-30'>
        <div class='number'>30</div>
      </div>
      <div class='top top-31'>
        <div class='number'>31</div>
      </div>
      <div class='top top-32'>
        <div class='number'>32</div>
      </div>
      <div class='top top-33'>
        <div class='number'>33</div>
      </div>
      <div class='top top-34'>
        <div class='number'>34</div>
      </div>
      <div class='top top-35'>
        <div class='number'>35</div>
      </div>
      <div class='top top-36'>
        <div class='number'>36</div>
      </div>
      <div class='top top-37'>
        <div class='number'>37</div>
      </div>
      <div class='top top-38'>
        <div class='number'>38</div>
      </div>
      <div class='top top-39'>
        <div class='number'>39</div>
      </div>
      <div class='top top-40'>
        <div class='number'>40</div>
      </div>
      <div class='top top-41'>
        <div class='number'>41</div>
      </div>
      <div class='top top-42'>
        <div class='number'>42</div>
      </div>
      <div class='top top-43'>
        <div class='number'>43</div>
      </div>
      <div class='top top-44'>
        <div class='number'>44</div>
      </div>
      <div class='top top-45'>
        <div class='number'>45</div>
      </div>
      <div class='top top-46'>
        <div class='number'>46</div>
      </div>
      <div class='top top-47'>
        <div class='number'>47</div>
      </div>
      <div class='top top-48'>
        <div class='number'>48</div>
      </div>
      <div class='top top-49'>
        <div class='number'>49</div>
      </div>
      <div class='top top-50'>
        <div class='number'>50</div>
      </div>
      <div class='top top-51'>
        <div class='number'>51</div>
      </div>
      <div class='top top-52'>
        <div class='number'>52</div>
      </div>
      <div class='top top-53'>
        <div class='number'>53</div>
      </div>
      <div class='top top-54'>
        <div class='number'>54</div>
      </div>
      <div class='top top-55'>
        <div class='number'>55</div>
      </div>
      <div class='top top-56'>
        <div class='number'>56</div>
      </div>
      <div class='top top-57'>
        <div class='number'>57</div>
      </div>
      <div class='top top-58'>
        <div class='number'>58</div>
      </div>
      <div class='top top-59'>
        <div class='number'>59</div>
      </div>
      <div class='top top-60'>
        <div class='number'>60</div>
      </div>
      <div class='top top-61'>
        <div class='number'>61</div>
      </div>
      <div class='top top-62'>
        <div class='number'>62</div>
      </div>
      <div class='top top-63'>
        <div class='number'>63</div>
      </div>
      <div class='top top-64'>
        <div class='number'>64</div>
      </div>
      <div class='top top-65'>
        <div class='number'>65</div>
      </div>
      <div class='top top-66'>
        <div class='number'>66</div>
      </div>
      <div class='top top-67'>
        <div class='number'>67</div>
      </div>
      <div class='top top-68'>
        <div class='number'>68</div>
      </div>
      <div class='top top-69'>
        <div class='number'>69</div>
      </div>
      <div class='top top-70'>
        <div class='number'>70</div>
      </div>
      <div class='top top-71'>
        <div class='number'>71</div>
      </div>
      <div class='top top-72'>
        <div class='number'>72</div>
      </div>
      <div class='top top-73'>
        <div class='number'>73</div>
      </div>
      <div class='top top-74'>
        <div class='number'>74</div>
      </div>
      <div class='top top-75'>
        <div class='number'>75</div>
      </div>
      <div class='top top-76'>
        <div class='number'>76</div>
      </div>
      <div class='top top-77'>
        <div class='number'>77</div>
      </div>
      <div class='top top-78'>
        <div class='number'>78</div>
      </div>
      <div class='top top-79'>
        <div class='number'>79</div>
      </div>
      <div class='top top-80'>
        <div class='number'>80</div>
      </div>
      <div class='top top-81'>
        <div class='number'>81</div>
      </div>
      <div class='top top-82'>
        <div class='number'>82</div>
      </div>
      <div class='top top-83'>
        <div class='number'>83</div>
      </div>
      <div class='top top-84'>
        <div class='number'>84</div>
      </div>
      <div class='top top-85'>
        <div class='number'>85</div>
      </div>
      <div class='top top-86'>
        <div class='number'>86</div>
      </div>
      <div class='top top-87'>
        <div class='number'>87</div>
      </div>
      <div class='top top-88'>
        <div class='number'>88</div>
      </div>
      <div class='top top-89'>
        <div class='number'>89</div>
      </div>
      <div class='top top-90'>
        <div class='number'>90</div>
      </div>
      <div class='top top-91'>
        <div class='number'>91</div>
      </div>
      <div class='top top-92'>
        <div class='number'>92</div>
      </div>
      <div class='top top-93'>
        <div class='number'>93</div>
      </div>
      <div class='top top-94'>
        <div class='number'>94</div>
      </div>
      <div class='top top-95'>
        <div class='number'>95</div>
      </div>
      <div class='top top-96'>
        <div class='number'>96</div>
      </div>
      <div class='top top-97'>
        <div class='number'>97</div>
      </div>
      <div class='top top-98'>
        <div class='number'>98</div>
      </div>
      <div class='top top-99'>
        <div class='number'>99</div>
      </div>
      <div class='top top-100'>
        <div class='number'>100</div>
      </div>
      <div class='top-29'>
        <div class='number'>100</div>
      </div>
    </div>
    <div class='bottom-ctr'>
      <div class='bottom bottom-0'></div>
      <div class='bottom bottom-1'>
        <div class='number'>1</div>
      </div>
      <div class='bottom bottom-2'>
        <div class='number'>2</div>
      </div>
      <div class='bottom bottom-3'>
        <div class='number'>3</div>
      </div>
      <div class='bottom bottom-4'>
        <div class='number'>4</div>
      </div>
      <div class='bottom bottom-5'>
        <div class='number'>5</div>
      </div>
      <div class='bottom bottom-6'>
        <div class='number'>6</div>
      </div>
      <div class='bottom bottom-7'>
        <div class='number'>7</div>
      </div>
      <div class='bottom bottom-8'>
        <div class='number'>8</div>
      </div>
      <div class='bottom bottom-9'>
        <div class='number'>9</div>
      </div>
      <div class='bottom bottom-10'>
        <div class='number'>10</div>
      </div>
      <div class='bottom bottom-11'>
        <div class='number'>11</div>
      </div>
      <div class='bottom bottom-12'>
        <div class='number'>12</div>
      </div>
      <div class='bottom bottom-13'>
        <div class='number'>13</div>
      </div>
      <div class='bottom bottom-14'>
        <div class='number'>14</div>
      </div>
      <div class='bottom bottom-15'>
        <div class='number'>15</div>
      </div>
      <div class='bottom bottom-16'>
        <div class='number'>16</div>
      </div>
      <div class='bottom bottom-17'>
        <div class='number'>17</div>
      </div>
      <div class='bottom bottom-18'>
        <div class='number'>18</div>
      </div>
      <div class='bottom bottom-19'>
        <div class='number'>19</div>
      </div>
      <div class='bottom bottom-20'>
        <div class='number'>20</div>
      </div>
      <div class='bottom bottom-21'>
        <div class='number'>21</div>
      </div>
      <div class='bottom bottom-22'>
        <div class='number'>22</div>
      </div>
      <div class='bottom bottom-23'>
        <div class='number'>23</div>
      </div>
      <div class='bottom bottom-24'>
        <div class='number'>24</div>
      </div>
      <div class='bottom bottom-25'>
        <div class='number'>25</div>
      </div>
      <div class='bottom bottom-26'>
        <div class='number'>26</div>
      </div>
      <div class='bottom bottom-27'>
        <div class='number'>27</div>
      </div>
      <div class='bottom bottom-28'>
        <div class='number'>28</div>
      </div>
      <div class='bottom bottom-29'>
        <div class='number'>29</div>
      </div>
      <div class='bottom bottom-30'>
        <div class='number'>30</div>
      </div>
      <div class='bottom bottom-31'>
        <div class='number'>31</div>
      </div>
      <div class='bottom bottom-32'>
        <div class='number'>32</div>
      </div>
      <div class='bottom bottom-33'>
        <div class='number'>33</div>
      </div>
      <div class='bottom bottom-34'>
        <div class='number'>34</div>
      </div>
      <div class='bottom bottom-35'>
        <div class='number'>35</div>
      </div>
      <div class='bottom bottom-36'>
        <div class='number'>36</div>
      </div>
      <div class='bottom bottom-37'>
        <div class='number'>37</div>
      </div>
      <div class='bottom bottom-38'>
        <div class='number'>38</div>
      </div>
      <div class='bottom bottom-39'>
        <div class='number'>39</div>
      </div>
      <div class='bottom bottom-40'>
        <div class='number'>40</div>
      </div>
      <div class='bottom bottom-41'>
        <div class='number'>41</div>
      </div>
      <div class='bottom bottom-42'>
        <div class='number'>42</div>
      </div>
      <div class='bottom bottom-43'>
        <div class='number'>43</div>
      </div>
      <div class='bottom bottom-44'>
        <div class='number'>44</div>
      </div>
      <div class='bottom bottom-45'>
        <div class='number'>45</div>
      </div>
      <div class='bottom bottom-46'>
        <div class='number'>46</div>
      </div>
      <div class='bottom bottom-47'>
        <div class='number'>47</div>
      </div>
      <div class='bottom bottom-48'>
        <div class='number'>48</div>
      </div>
      <div class='bottom bottom-49'>
        <div class='number'>49</div>
      </div>
      <div class='bottom bottom-50'>
        <div class='number'>50</div>
      </div>
      <div class='bottom bottom-51'>
        <div class='number'>51</div>
      </div>
      <div class='bottom bottom-52'>
        <div class='number'>52</div>
      </div>
      <div class='bottom bottom-53'>
        <div class='number'>53</div>
      </div>
      <div class='bottom bottom-54'>
        <div class='number'>54</div>
      </div>
      <div class='bottom bottom-55'>
        <div class='number'>55</div>
      </div>
      <div class='bottom bottom-56'>
        <div class='number'>56</div>
      </div>
      <div class='bottom bottom-57'>
        <div class='number'>57</div>
      </div>
      <div class='bottom bottom-58'>
        <div class='number'>58</div>
      </div>
      <div class='bottom bottom-59'>
        <div class='number'>59</div>
      </div>
      <div class='bottom bottom-60'>
        <div class='number'>60</div>
      </div>
      <div class='bottom bottom-61'>
        <div class='number'>61</div>
      </div>
      <div class='bottom bottom-62'>
        <div class='number'>62</div>
      </div>
      <div class='bottom bottom-63'>
        <div class='number'>63</div>
      </div>
      <div class='bottom bottom-64'>
        <div class='number'>64</div>
      </div>
      <div class='bottom bottom-65'>
        <div class='number'>65</div>
      </div>
      <div class='bottom bottom-66'>
        <div class='number'>66</div>
      </div>
      <div class='bottom bottom-67'>
        <div class='number'>67</div>
      </div>
      <div class='bottom bottom-68'>
        <div class='number'>68</div>
      </div>
      <div class='bottom bottom-69'>
        <div class='number'>69</div>
      </div>
      <div class='bottom bottom-70'>
        <div class='number'>70</div>
      </div>
      <div class='bottom bottom-71'>
        <div class='number'>71</div>
      </div>
      <div class='bottom bottom-72'>
        <div class='number'>72</div>
      </div>
      <div class='bottom bottom-73'>
        <div class='number'>73</div>
      </div>
      <div class='bottom bottom-74'>
        <div class='number'>74</div>
      </div>
      <div class='bottom bottom-75'>
        <div class='number'>75</div>
      </div>
      <div class='bottom bottom-76'>
        <div class='number'>76</div>
      </div>
      <div class='bottom bottom-77'>
        <div class='number'>77</div>
      </div>
      <div class='bottom bottom-78'>
        <div class='number'>78</div>
      </div>
      <div class='bottom bottom-79'>
        <div class='number'>79</div>
      </div>
      <div class='bottom bottom-80'>
        <div class='number'>80</div>
      </div>
      <div class='bottom bottom-81'>
        <div class='number'>81</div>
      </div>
      <div class='bottom bottom-82'>
        <div class='number'>82</div>
      </div>
      <div class='bottom bottom-83'>
        <div class='number'>83</div>
      </div>
      <div class='bottom bottom-84'>
        <div class='number'>84</div>
      </div>
      <div class='bottom bottom-85'>
        <div class='number'>85</div>
      </div>
      <div class='bottom bottom-86'>
        <div class='number'>86</div>
      </div>
      <div class='bottom bottom-87'>
        <div class='number'>87</div>
      </div>
      <div class='bottom bottom-88'>
        <div class='number'>88</div>
      </div>
      <div class='bottom bottom-89'>
        <div class='number'>89</div>
      </div>
      <div class='bottom bottom-90'>
        <div class='number'>90</div>
      </div>
      <div class='bottom bottom-91'>
        <div class='number'>91</div>
      </div>
      <div class='bottom bottom-92'>
        <div class='number'>92</div>
      </div>
      <div class='bottom bottom-93'>
        <div class='number'>93</div>
      </div>
      <div class='bottom bottom-94'>
        <div class='number'>94</div>
      </div>
      <div class='bottom bottom-95'>
        <div class='number'>95</div>
      </div>
      <div class='bottom bottom-96'>
        <div class='number'>96</div>
      </div>
      <div class='bottom bottom-97'>
        <div class='number'>97</div>
      </div>
      <div class='bottom bottom-98'>
        <div class='number'>98</div>
      </div>
      <div class='bottom bottom-99'>
        <div class='number'>99</div>
      </div>
      <div class='bottom bottom-100'>
        <div class='number'>100</div>
      </div>
    </div>
  </div>
</div>

@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

html,
body {
  display: table;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.main-ctr {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.calendar-ctr {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  position: relative;
  @include perspective(500px);
  font-family: Roboto;
  font-weight: 400;
  
  .top {
    @include position(absolute, 0 0 x 0);
    height: 50%;
    background: #3C75D3;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    @include transform-origin(center bottom);
    will-change: transform;
    
    &:before {
      content: "";
      @include position(absolute, 0 0 0 0);
      border-top: 1px solid rgba(0,0,0,.25);
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    
    &.top-0 {
      background: #ddd;
    }
    
    @for $i from 0 through 100 {
      
      &.top-#{$i} {
        z-index: 100 - $i;
      }
      
    }
    
    .number {
      @include position(absolute, 0 0 -100% 0);
      text-align: center;
      line-height: 200px;
      font-size: 120px;
      color: white;
      text-shadow: 2px 2px rgba(0,0,0,.05);
    }
  }
    
  .top-29 {
    @include position(absolute, 0 0 x 0);
    height: 50%;
    background: #3C6BD2;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    @include transform-origin(center bottom);
    will-change: transform;
    
    &:before {
      content: "";
      @include position(absolute, 0 0 0 0);
      border-top: 1px solid rgba(0,0,0,.25);
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    
    .number {
      @include position(absolute, 0 0 -100% 0);
      text-align: center;
      line-height: 200px;
      font-size: 120px;
      color: white;
      text-shadow: 2px 2px rgba(0,0,0,.05);
    }
  }
  
  .bottom {
    @include position(absolute, x 0 0 0);
    height: 50%;
    background: #4887F2;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
    @include transform-origin(center top);
    @include transform(rotateX(90deg));
    will-change: transform;
    
    &:before {
      content: "";
      @include position(absolute, 0 0 0 0);
      border-bottom: 1px solid rgba(0,0,0,.25);
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
      border-top: 1px solid rgba(0,0,0,.15);
    }
    
    @for $i from 0 through 100 {
      
      &.bottom-#{$i} {
        z-index: $i;
      }
      
    }
    
    &.bottom-0 {
      background: #eee;
      @include transform(rotateX(0deg));
    }
    
    .number {
      @include position(absolute, -100% 0 0 0);
      text-align: center;
      line-height: 200px;
      font-size: 120px;
      color: white;
      text-shadow: 2px 2px rgba(0,0,0,.05);
    }
  }
}

// refresh button
.refresh {
  @include position(fixed, 15px 15px x x);
  @include transform-origin(right top);
  @include transform(scale(.7));
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  z-index: 99;
  cursor: pointer;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
}

View Compiled

var tl = new TimelineMax({});

tl.set(".calendar-ctr", {
  scale: .75
})

tl.timeScale(1);

tl.staggerTo(".bottom", .1, {
    rotationX: "0deg",
  }, .1)
  
  .staggerTo(".top", .1, {
    rotationX: "-90deg"
  }, .1, 0)

  .to(".calendar-ctr", 9, {
    scale: 1
  }, 0)

// restart animation
var refresh = document.querySelector(".refresh");
refresh.addEventListener("click", function(){
  tl.restart();
})

// copy
balapaCop("Google Calendar - Animated Icon", "#999")

This Pen is owned by Muthu Lakshmi UI on CodePen.

See more by @Muthu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript