RadialLoader

index.js

/** @flow */

require('./styles.css');

import React from 'react';
var {PropTypes} = React;

class RadialLoader extends React.Component {
  render(): ?ReactElement {
    return (
      <div className="RadialLoader" data-progress={this.props.progress}>
        <div className="circle">
          <div className="mask full">
            <div className="fill"></div>
          </div>
          <div className="mask half">
            <div className="fill"></div>
            <div className="fill fix"></div>
          </div>
          <div className="shadow"></div>
        </div>
        <div className="inset">
          <div className="message">
            COMPLETED
          </div>
          <div className="percentage">
            <div className="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
          </div>
        </div>
      </div>
    );
  }
}

RadialLoader.propTypes = {
  progress: PropTypes.number.isRequired,
};

export default RadialLoader;

styles.css

/** @define RadialLoader; use strict */

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

.RadialLoader {
  margin: 50px;
  width: 120px;
  height: 120px;
  background-color: #d6dadc;
  border-radius: 50%;
}

.RadialLoader .circle .mask,
.RadialLoader .circle .fill,
.RadialLoader .circle .shadow {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.RadialLoader .circle .shadow {
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
}

.RadialLoader .circle .mask,
.RadialLoader .circle .fill {
  -webkit-backface-visibility: hidden;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s;
  border-radius: 50%;
}

.RadialLoader .circle .mask {
  clip: rect(0px, 120px, 120px, 60px);
}

.RadialLoader .circle .mask .fill {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #97a71d;
}

.RadialLoader .inset {
  width: 108px;
  height: 108px;
  position: absolute;
  margin-left: 6px;
  margin-top: 6px;
  background-color: #fbfbfb;
  border-radius: 50%;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
}

.RadialLoader .inset .message {
  position: absolute;
  top: 32px;
  left: 0px;
  right: 0;
  font-size: 14px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #97a71d;
  text-align: center;
}

.RadialLoader .inset .percentage {
  height: 15px;
  width: 57px;
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 25.5px;
  line-height: 1;
}

.RadialLoader .inset .percentage .numbers {
  margin-top: -15px;
  transition: width 1s;
}
.RadialLoader .inset .percentage .numbers span {
  width: 57px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #97a71d;
}

.RadialLoader[data-progress="0"] .circle .mask.full,
.RadialLoader[data-progress="0"] .circle .fill {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.RadialLoader[data-progress="0"] .circle .fill.fix {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.RadialLoader[data-progress="0"] .inset .percentage .numbers {
  width: 57px;
}

.RadialLoader[data-progress="1"] .circle .mask.full,
.RadialLoader[data-progress="1"] .circle .fill {
  -webkit-transform: rotate(1.8deg);
  -ms-transform: rotate(1.8deg);
  transform: rotate(1.8deg);
}
.RadialLoader[data-progress="1"] .circle .fill.fix {
  -webkit-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.RadialLoader[data-progress="1"] .inset .percentage .numbers {
  width: 114px;
}

.RadialLoader[data-progress="2"] .circle .mask.full,
.RadialLoader[data-progress="2"] .circle .fill {
  -webkit-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.RadialLoader[data-progress="2"] .circle .fill.fix {
  -webkit-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.RadialLoader[data-progress="2"] .inset .percentage .numbers {
  width: 171px;
}
.RadialLoader[data-progress="3"] .circle .mask.full,
.RadialLoader[data-progress="3"] .circle .fill {
  -webkit-transform: rotate(5.4deg);
  -ms-transform: rotate(5.4deg);
  transform: rotate(5.4deg);
}
.RadialLoader[data-progress="3"] .circle .fill.fix {
  -webkit-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.RadialLoader[data-progress="3"] .inset .percentage .numbers {
  width: 228px;
}
.RadialLoader[data-progress="4"] .circle .mask.full,
.RadialLoader[data-progress="4"] .circle .fill {
  -webkit-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.RadialLoader[data-progress="4"] .circle .fill.fix {
  -webkit-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.RadialLoader[data-progress="4"] .inset .percentage .numbers {
  width: 285px;
}
.RadialLoader[data-progress="5"] .circle .mask.full,
.RadialLoader[data-progress="5"] .circle .fill {
  -webkit-transform: rotate(9deg);
  -ms-transform: rotate(9deg);
  transform: rotate(9deg);
}
.RadialLoader[data-progress="5"] .circle .fill.fix {
  -webkit-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  transform: rotate(18deg);
}
.RadialLoader[data-progress="5"] .inset .percentage .numbers {
  width: 342px;
}
.RadialLoader[data-progress="6"] .circle .mask.full,
.RadialLoader[data-progress="6"] .circle .fill {
  -webkit-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.RadialLoader[data-progress="6"] .circle .fill.fix {
  -webkit-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.RadialLoader[data-progress="6"] .inset .percentage .numbers {
  width: 399px;
}
.RadialLoader[data-progress="7"] .circle .mask.full,
.RadialLoader[data-progress="7"] .circle .fill {
  -webkit-transform: rotate(12.6deg);
  -ms-transform: rotate(12.6deg);
  transform: rotate(12.6deg);
}
.RadialLoader[data-progress="7"] .circle .fill.fix {
  -webkit-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.RadialLoader[data-progress="7"] .inset .percentage .numbers {
  width: 456px;
}
.RadialLoader[data-progress="8"] .circle .mask.full,
.RadialLoader[data-progress="8"] .circle .fill {
  -webkit-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.RadialLoader[data-progress="8"] .circle .fill.fix {
  -webkit-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.RadialLoader[data-progress="8"] .inset .percentage .numbers {
  width: 513px;
}
.RadialLoader[data-progress="9"] .circle .mask.full,
.RadialLoader[data-progress="9"] .circle .fill {
  -webkit-transform: rotate(16.2deg);
  -ms-transform: rotate(16.2deg);
  transform: rotate(16.2deg);
}
.RadialLoader[data-progress="9"] .circle .fill.fix {
  -webkit-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.RadialLoader[data-progress="9"] .inset .percentage .numbers {
  width: 570px;
}
.RadialLoader[data-progress="10"] .circle .mask.full,
.RadialLoader[data-progress="10"] .circle .fill {
  -webkit-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  transform: rotate(18deg);
}
.RadialLoader[data-progress="10"] .circle .fill.fix {
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  transform: rotate(36deg);
}
.RadialLoader[data-progress="10"] .inset .percentage .numbers {
  width: 627px;
}
.RadialLoader[data-progress="11"] .circle .mask.full,
.RadialLoader[data-progress="11"] .circle .fill {
  -webkit-transform: rotate(19.8deg);
  -ms-transform: rotate(19.8deg);
  transform: rotate(19.8deg);
}
.RadialLoader[data-progress="11"] .circle .fill.fix {
  -webkit-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.RadialLoader[data-progress="11"] .inset .percentage .numbers {
  width: 684px;
}
.RadialLoader[data-progress="12"] .circle .mask.full,
.RadialLoader[data-progress="12"] .circle .fill {
  -webkit-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.RadialLoader[data-progress="12"] .circle .fill.fix {
  -webkit-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.RadialLoader[data-progress="12"] .inset .percentage .numbers {
  width: 741px;
}
.RadialLoader[data-progress="13"] .circle .mask.full,
.RadialLoader[data-progress="13"] .circle .fill {
  -webkit-transform: rotate(23.400000000000002deg);
  -ms-transform: rotate(23.400000000000002deg);
  transform: rotate(23.400000000000002deg);
}
.RadialLoader[data-progress="13"] .circle .fill.fix {
  -webkit-transform: rotate(46.800000000000004deg);
  -ms-transform: rotate(46.800000000000004deg);
  transform: rotate(46.800000000000004deg);
}
.RadialLoader[data-progress="13"] .inset .percentage .numbers {
  width: 798px;
}
.RadialLoader[data-progress="14"] .circle .mask.full,
.RadialLoader[data-progress="14"] .circle .fill {
  -webkit-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.RadialLoader[data-progress="14"] .circle .fill.fix {
  -webkit-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.RadialLoader[data-progress="14"] .inset .percentage .numbers {
  width: 855px;
}
.RadialLoader[data-progress="15"] .circle .mask.full,
.RadialLoader[data-progress="15"] .circle .fill {
  -webkit-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  transform: rotate(27deg);
}
.RadialLoader[data-progress="15"] .circle .fill.fix {
  -webkit-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  transform: rotate(54deg);
}
.RadialLoader[data-progress="15"] .inset .percentage .numbers {
  width: 912px;
}
.RadialLoader[data-progress="16"] .circle .mask.full,
.RadialLoader[data-progress="16"] .circle .fill {
  -webkit-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.RadialLoader[data-progress="16"] .circle .fill.fix {
  -webkit-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.RadialLoader[data-progress="16"] .inset .percentage .numbers {
  width: 969px;
}
.RadialLoader[data-progress="17"] .circle .mask.full,
.RadialLoader[data-progress="17"] .circle .fill {
  -webkit-transform: rotate(30.6deg);
  -ms-transform: rotate(30.6deg);
  transform: rotate(30.6deg);
}
.RadialLoader[data-progress="17"] .circle .fill.fix {
  -webkit-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.RadialLoader[data-progress="17"] .inset .percentage .numbers {
  width: 1026px;
}
.RadialLoader[data-progress="18"] .circle .mask.full,
.RadialLoader[data-progress="18"] .circle .fill {
  -webkit-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.RadialLoader[data-progress="18"] .circle .fill.fix {
  -webkit-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.RadialLoader[data-progress="18"] .inset .percentage .numbers {
  width: 1083px;
}
.RadialLoader[data-progress="19"] .circle .mask.full,
.RadialLoader[data-progress="19"] .circle .fill {
  -webkit-transform: rotate(34.2deg);
  -ms-transform: rotate(34.2deg);
  transform: rotate(34.2deg);
}
.RadialLoader[data-progress="19"] .circle .fill.fix {
  -webkit-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.RadialLoader[data-progress="19"] .inset .percentage .numbers {
  width: 1140px;
}
.RadialLoader[data-progress="20"] .circle .mask.full,
.RadialLoader[data-progress="20"] .circle .fill {
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  transform: rotate(36deg);
}
.RadialLoader[data-progress="20"] .circle .fill.fix {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  transform: rotate(72deg);
}
.RadialLoader[data-progress="20"] .inset .percentage .numbers {
  width: 1197px;
}
.RadialLoader[data-progress="21"] .circle .mask.full,
.RadialLoader[data-progress="21"] .circle .fill {
  -webkit-transform: rotate(37.800000000000004deg);
  -ms-transform: rotate(37.800000000000004deg);
  transform: rotate(37.800000000000004deg);
}
.RadialLoader[data-progress="21"] .circle .fill.fix {
  -webkit-transform: rotate(75.60000000000001deg);
  -ms-transform: rotate(75.60000000000001deg);
  transform: rotate(75.60000000000001deg);
}
.RadialLoader[data-progress="21"] .inset .percentage .numbers {
  width: 1254px;
}
.RadialLoader[data-progress="22"] .circle .mask.full,
.RadialLoader[data-progress="22"] .circle .fill {
  -webkit-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.RadialLoader[data-progress="22"] .circle .fill.fix {
  -webkit-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.RadialLoader[data-progress="22"] .inset .percentage .numbers {
  width: 1311px;
}
.RadialLoader[data-progress="23"] .circle .mask.full,
.RadialLoader[data-progress="23"] .circle .fill {
  -webkit-transform: rotate(41.4deg);
  -ms-transform: rotate(41.4deg);
  transform: rotate(41.4deg);
}
.RadialLoader[data-progress="23"] .circle .fill.fix {
  -webkit-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.RadialLoader[data-progress="23"] .inset .percentage .numbers {
  width: 1368px;
}
.RadialLoader[data-progress="24"] .circle .mask.full,
.RadialLoader[data-progress="24"] .circle .fill {
  -webkit-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.RadialLoader[data-progress="24"] .circle .fill.fix {
  -webkit-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.RadialLoader[data-progress="24"] .inset .percentage .numbers {
  width: 1425px;
}
.RadialLoader[data-progress="25"] .circle .mask.full,
.RadialLoader[data-progress="25"] .circle .fill {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.RadialLoader[data-progress="25"] .circle .fill.fix {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.RadialLoader[data-progress="25"] .inset .percentage .numbers {
  width: 1482px;
}
.RadialLoader[data-progress="26"] .circle .mask.full,
.RadialLoader[data-progress="26"] .circle .fill {
  -webkit-transform: rotate(46.800000000000004deg);
  -ms-transform: rotate(46.800000000000004deg);
  transform: rotate(46.800000000000004deg);
}
.RadialLoader[data-progress="26"] .circle .fill.fix {
  -webkit-transform: rotate(93.60000000000001deg);
  -ms-transform: rotate(93.60000000000001deg);
  transform: rotate(93.60000000000001deg);
}
.RadialLoader[data-progress="26"] .inset .percentage .numbers {
  width: 1539px;
}
.RadialLoader[data-progress="27"] .circle .mask.full,
.RadialLoader[data-progress="27"] .circle .fill {
  -webkit-transform: rotate(48.6deg);
  -ms-transform: rotate(48.6deg);
  transform: rotate(48.6deg);
}
.RadialLoader[data-progress="27"] .circle .fill.fix {
  -webkit-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.RadialLoader[data-progress="27"] .inset .percentage .numbers {
  width: 1596px;
}
.RadialLoader[data-progress="28"] .circle .mask.full,
.RadialLoader[data-progress="28"] .circle .fill {
  -webkit-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.RadialLoader[data-progress="28"] .circle .fill.fix {
  -webkit-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.RadialLoader[data-progress="28"] .inset .percentage .numbers {
  width: 1653px;
}
.RadialLoader[data-progress="29"] .circle .mask.full,
.RadialLoader[data-progress="29"] .circle .fill {
  -webkit-transform: rotate(52.2deg);
  -ms-transform: rotate(52.2deg);
  transform: rotate(52.2deg);
}
.RadialLoader[data-progress="29"] .circle .fill.fix {
  -webkit-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.RadialLoader[data-progress="29"] .inset .percentage .numbers {
  width: 1710px;
}
.RadialLoader[data-progress="30"] .circle .mask.full,
.RadialLoader[data-progress="30"] .circle .fill {
  -webkit-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  transform: rotate(54deg);
}
.RadialLoader[data-progress="30"] .circle .fill.fix {
  -webkit-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  transform: rotate(108deg);
}
.RadialLoader[data-progress="30"] .inset .percentage .numbers {
  width: 1767px;
}
.RadialLoader[data-progress="31"] .circle .mask.full,
.RadialLoader[data-progress="31"] .circle .fill {
  -webkit-transform: rotate(55.800000000000004deg);
  -ms-transform: rotate(55.800000000000004deg);
  transform: rotate(55.800000000000004deg);
}
.RadialLoader[data-progress="31"] .circle .fill.fix {
  -webkit-transform: rotate(111.60000000000001deg);
  -ms-transform: rotate(111.60000000000001deg);
  transform: rotate(111.60000000000001deg);
}
.RadialLoader[data-progress="31"] .inset .percentage .numbers {
  width: 1824px;
}
.RadialLoader[data-progress="32"] .circle .mask.full,
.RadialLoader[data-progress="32"] .circle .fill {
  -webkit-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.RadialLoader[data-progress="32"] .circle .fill.fix {
  -webkit-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.RadialLoader[data-progress="32"] .inset .percentage .numbers {
  width: 1881px;
}
.RadialLoader[data-progress="33"] .circle .mask.full,
.RadialLoader[data-progress="33"] .circle .fill {
  -webkit-transform: rotate(59.4deg);
  -ms-transform: rotate(59.4deg);
  transform: rotate(59.4deg);
}
.RadialLoader[data-progress="33"] .circle .fill.fix {
  -webkit-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.RadialLoader[data-progress="33"] .inset .percentage .numbers {
  width: 1938px;
}
.RadialLoader[data-progress="34"] .circle .mask.full,
.RadialLoader[data-progress="34"] .circle .fill {
  -webkit-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.RadialLoader[data-progress="34"] .circle .fill.fix {
  -webkit-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.RadialLoader[data-progress="34"] .inset .percentage .numbers {
  width: 1995px;
}
.RadialLoader[data-progress="35"] .circle .mask.full,
.RadialLoader[data-progress="35"] .circle .fill {
  -webkit-transform: rotate(63deg);
  -ms-transform: rotate(63deg);
  transform: rotate(63deg);
}
.RadialLoader[data-progress="35"] .circle .fill.fix {
  -webkit-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  transform: rotate(126deg);
}
.RadialLoader[data-progress="35"] .inset .percentage .numbers {
  width: 2052px;
}
.RadialLoader[data-progress="36"] .circle .mask.full,
.RadialLoader[data-progress="36"] .circle .fill {
  -webkit-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.RadialLoader[data-progress="36"] .circle .fill.fix {
  -webkit-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.RadialLoader[data-progress="36"] .inset .percentage .numbers {
  width: 2109px;
}
.RadialLoader[data-progress="37"] .circle .mask.full,
.RadialLoader[data-progress="37"] .circle .fill {
  -webkit-transform: rotate(66.60000000000001deg);
  -ms-transform: rotate(66.60000000000001deg);
  transform: rotate(66.60000000000001deg);
}
.RadialLoader[data-progress="37"] .circle .fill.fix {
  -webkit-transform: rotate(133.20000000000002deg);
  -ms-transform: rotate(133.20000000000002deg);
  transform: rotate(133.20000000000002deg);
}
.RadialLoader[data-progress="37"] .inset .percentage .numbers {
  width: 2166px;
}
.RadialLoader[data-progress="38"] .circle .mask.full,
.RadialLoader[data-progress="38"] .circle .fill {
  -webkit-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.RadialLoader[data-progress="38"] .circle .fill.fix {
  -webkit-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.RadialLoader[data-progress="38"] .inset .percentage .numbers {
  width: 2223px;
}
.RadialLoader[data-progress="39"] .circle .mask.full,
.RadialLoader[data-progress="39"] .circle .fill {
  -webkit-transform: rotate(70.2deg);
  -ms-transform: rotate(70.2deg);
  transform: rotate(70.2deg);
}
.RadialLoader[data-progress="39"] .circle .fill.fix {
  -webkit-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.RadialLoader[data-progress="39"] .inset .percentage .numbers {
  width: 2280px;
}
.RadialLoader[data-progress="40"] .circle .mask.full,
.RadialLoader[data-progress="40"] .circle .fill {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  transform: rotate(72deg);
}
.RadialLoader[data-progress="40"] .circle .fill.fix {
  -webkit-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  transform: rotate(144deg);
}
.RadialLoader[data-progress="40"] .inset .percentage .numbers {
  width: 2337px;
}
.RadialLoader[data-progress="41"] .circle .mask.full,
.RadialLoader[data-progress="41"] .circle .fill {
  -webkit-transform: rotate(73.8deg);
  -ms-transform: rotate(73.8deg);
  transform: rotate(73.8deg);
}
.RadialLoader[data-progress="41"] .circle .fill.fix {
  -webkit-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.RadialLoader[data-progress="41"] .inset .percentage .numbers {
  width: 2394px;
}
.RadialLoader[data-progress="42"] .circle .mask.full,
.RadialLoader[data-progress="42"] .circle .fill {
  -webkit-transform: rotate(75.60000000000001deg);
  -ms-transform: rotate(75.60000000000001deg);
  transform: rotate(75.60000000000001deg);
}
.RadialLoader[data-progress="42"] .circle .fill.fix {
  -webkit-transform: rotate(151.20000000000002deg);
  -ms-transform: rotate(151.20000000000002deg);
  transform: rotate(151.20000000000002deg);
}
.RadialLoader[data-progress="42"] .inset .percentage .numbers {
  width: 2451px;
}
.RadialLoader[data-progress="43"] .circle .mask.full,
.RadialLoader[data-progress="43"] .circle .fill {
  -webkit-transform: rotate(77.4deg);
  -ms-transform: rotate(77.4deg);
  transform: rotate(77.4deg);
}
.RadialLoader[data-progress="43"] .circle .fill.fix {
  -webkit-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.RadialLoader[data-progress="43"] .inset .percentage .numbers {
  width: 2508px;
}
.RadialLoader[data-progress="44"] .circle .mask.full,
.RadialLoader[data-progress="44"] .circle .fill {
  -webkit-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.RadialLoader[data-progress="44"] .circle .fill.fix {
  -webkit-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.RadialLoader[data-progress="44"] .inset .percentage .numbers {
  width: 2565px;
}
.RadialLoader[data-progress="45"] .circle .mask.full,
.RadialLoader[data-progress="45"] .circle .fill {
  -webkit-transform: rotate(81deg);
  -ms-transform: rotate(81deg);
  transform: rotate(81deg);
}
.RadialLoader[data-progress="45"] .circle .fill.fix {
  -webkit-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  transform: rotate(162deg);
}
.RadialLoader[data-progress="45"] .inset .percentage .numbers {
  width: 2622px;
}
.RadialLoader[data-progress="46"] .circle .mask.full,
.RadialLoader[data-progress="46"] .circle .fill {
  -webkit-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.RadialLoader[data-progress="46"] .circle .fill.fix {
  -webkit-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.RadialLoader[data-progress="46"] .inset .percentage .numbers {
  width: 2679px;
}
.RadialLoader[data-progress="47"] .circle .mask.full,
.RadialLoader[data-progress="47"] .circle .fill {
  -webkit-transform: rotate(84.60000000000001deg);
  -ms-transform: rotate(84.60000000000001deg);
  transform: rotate(84.60000000000001deg);
}
.RadialLoader[data-progress="47"] .circle .fill.fix {
  -webkit-transform: rotate(169.20000000000002deg);
  -ms-transform: rotate(169.20000000000002deg);
  transform: rotate(169.20000000000002deg);
}
.RadialLoader[data-progress="47"] .inset .percentage .numbers {
  width: 2736px;
}
.RadialLoader[data-progress="48"] .circle .mask.full,
.RadialLoader[data-progress="48"] .circle .fill {
  -webkit-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.RadialLoader[data-progress="48"] .circle .fill.fix {
  -webkit-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.RadialLoader[data-progress="48"] .inset .percentage .numbers {
  width: 2793px;
}
.RadialLoader[data-progress="49"] .circle .mask.full,
.RadialLoader[data-progress="49"] .circle .fill {
  -webkit-transform: rotate(88.2deg);
  -ms-transform: rotate(88.2deg);
  transform: rotate(88.2deg);
}
.RadialLoader[data-progress="49"] .circle .fill.fix {
  -webkit-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.RadialLoader[data-progress="49"] .inset .percentage .numbers {
  width: 2850px;
}
.RadialLoader[data-progress="50"] .circle .mask.full,
.RadialLoader[data-progress="50"] .circle .fill {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.RadialLoader[data-progress="50"] .circle .fill.fix {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.RadialLoader[data-progress="50"] .inset .percentage .numbers {
  width: 2907px;
}
.RadialLoader[data-progress="51"] .circle .mask.full,
.RadialLoader[data-progress="51"] .circle .fill {
  -webkit-transform: rotate(91.8deg);
  -ms-transform: rotate(91.8deg);
  transform: rotate(91.8deg);
}
.RadialLoader[data-progress="51"] .circle .fill.fix {
  -webkit-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.RadialLoader[data-progress="51"] .inset .percentage .numbers {
  width: 2964px;
}
.RadialLoader[data-progress="52"] .circle .mask.full,
.RadialLoader[data-progress="52"] .circle .fill {
  -webkit-transform: rotate(93.60000000000001deg);
  -ms-transform: rotate(93.60000000000001deg);
  transform: rotate(93.60000000000001deg);
}
.RadialLoader[data-progress="52"] .circle .fill.fix {
  -webkit-transform: rotate(187.20000000000002deg);
  -ms-transform: rotate(187.20000000000002deg);
  transform: rotate(187.20000000000002deg);
}
.RadialLoader[data-progress="52"] .inset .percentage .numbers {
  width: 3021px;
}
.RadialLoader[data-progress="53"] .circle .mask.full,
.RadialLoader[data-progress="53"] .circle .fill {
  -webkit-transform: rotate(95.4deg);
  -ms-transform: rotate(95.4deg);
  transform: rotate(95.4deg);
}
.RadialLoader[data-progress="53"] .circle .fill.fix {
  -webkit-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.RadialLoader[data-progress="53"] .inset .percentage .numbers {
  width: 3078px;
}
.RadialLoader[data-progress="54"] .circle .mask.full,
.RadialLoader[data-progress="54"] .circle .fill {
  -webkit-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.RadialLoader[data-progress="54"] .circle .fill.fix {
  -webkit-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.RadialLoader[data-progress="54"] .inset .percentage .numbers {
  width: 3135px;
}
.RadialLoader[data-progress="55"] .circle .mask.full,
.RadialLoader[data-progress="55"] .circle .fill {
  -webkit-transform: rotate(99deg);
  -ms-transform: rotate(99deg);
  transform: rotate(99deg);
}
.RadialLoader[data-progress="55"] .circle .fill.fix {
  -webkit-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  transform: rotate(198deg);
}
.RadialLoader[data-progress="55"] .inset .percentage .numbers {
  width: 3192px;
}
.RadialLoader[data-progress="56"] .circle .mask.full,
.RadialLoader[data-progress="56"] .circle .fill {
  -webkit-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.RadialLoader[data-progress="56"] .circle .fill.fix {
  -webkit-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.RadialLoader[data-progress="56"] .inset .percentage .numbers {
  width: 3249px;
}
.RadialLoader[data-progress="57"] .circle .mask.full,
.RadialLoader[data-progress="57"] .circle .fill {
  -webkit-transform: rotate(102.60000000000001deg);
  -ms-transform: rotate(102.60000000000001deg);
  transform: rotate(102.60000000000001deg);
}
.RadialLoader[data-progress="57"] .circle .fill.fix {
  -webkit-transform: rotate(205.20000000000002deg);
  -ms-transform: rotate(205.20000000000002deg);
  transform: rotate(205.20000000000002deg);
}
.RadialLoader[data-progress="57"] .inset .percentage .numbers {
  width: 3306px;
}
.RadialLoader[data-progress="58"] .circle .mask.full,
.RadialLoader[data-progress="58"] .circle .fill {
  -webkit-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.RadialLoader[data-progress="58"] .circle .fill.fix {
  -webkit-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.RadialLoader[data-progress="58"] .inset .percentage .numbers {
  width: 3363px;
}
.RadialLoader[data-progress="59"] .circle .mask.full,
.RadialLoader[data-progress="59"] .circle .fill {
  -webkit-transform: rotate(106.2deg);
  -ms-transform: rotate(106.2deg);
  transform: rotate(106.2deg);
}
.RadialLoader[data-progress="59"] .circle .fill.fix {
  -webkit-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.RadialLoader[data-progress="59"] .inset .percentage .numbers {
  width: 3420px;
}
.RadialLoader[data-progress="60"] .circle .mask.full,
.RadialLoader[data-progress="60"] .circle .fill {
  -webkit-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  transform: rotate(108deg);
}
.RadialLoader[data-progress="60"] .circle .fill.fix {
  -webkit-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  transform: rotate(216deg);
}
.RadialLoader[data-progress="60"] .inset .percentage .numbers {
  width: 3477px;
}
.RadialLoader[data-progress="61"] .circle .mask.full,
.RadialLoader[data-progress="61"] .circle .fill {
  -webkit-transform: rotate(109.8deg);
  -ms-transform: rotate(109.8deg);
  transform: rotate(109.8deg);
}
.RadialLoader[data-progress="61"] .circle .fill.fix {
  -webkit-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.RadialLoader[data-progress="61"] .inset .percentage .numbers {
  width: 3534px;
}
.RadialLoader[data-progress="62"] .circle .mask.full,
.RadialLoader[data-progress="62"] .circle .fill {
  -webkit-transform: rotate(111.60000000000001deg);
  -ms-transform: rotate(111.60000000000001deg);
  transform: rotate(111.60000000000001deg);
}
.RadialLoader[data-progress="62"] .circle .fill.fix {
  -webkit-transform: rotate(223.20000000000002deg);
  -ms-transform: rotate(223.20000000000002deg);
  transform: rotate(223.20000000000002deg);
}
.RadialLoader[data-progress="62"] .inset .percentage .numbers {
  width: 3591px;
}
.RadialLoader[data-progress="63"] .circle .mask.full,
.RadialLoader[data-progress="63"] .circle .fill {
  -webkit-transform: rotate(113.4deg);
  -ms-transform: rotate(113.4deg);
  transform: rotate(113.4deg);
}
.RadialLoader[data-progress="63"] .circle .fill.fix {
  -webkit-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.RadialLoader[data-progress="63"] .inset .percentage .numbers {
  width: 3648px;
}
.RadialLoader[data-progress="64"] .circle .mask.full,
.RadialLoader[data-progress="64"] .circle .fill {
  -webkit-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.RadialLoader[data-progress="64"] .circle .fill.fix {
  -webkit-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.RadialLoader[data-progress="64"] .inset .percentage .numbers {
  width: 3705px;
}
.RadialLoader[data-progress="65"] .circle .mask.full,
.RadialLoader[data-progress="65"] .circle .fill {
  -webkit-transform: rotate(117deg);
  -ms-transform: rotate(117deg);
  transform: rotate(117deg);
}
.RadialLoader[data-progress="65"] .circle .fill.fix {
  -webkit-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  transform: rotate(234deg);
}
.RadialLoader[data-progress="65"] .inset .percentage .numbers {
  width: 3762px;
}
.RadialLoader[data-progress="66"] .circle .mask.full,
.RadialLoader[data-progress="66"] .circle .fill {
  -webkit-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.RadialLoader[data-progress="66"] .circle .fill.fix {
  -webkit-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.RadialLoader[data-progress="66"] .inset .percentage .numbers {
  width: 3819px;
}
.RadialLoader[data-progress="67"] .circle .mask.full,
.RadialLoader[data-progress="67"] .circle .fill {
  -webkit-transform: rotate(120.60000000000001deg);
  -ms-transform: rotate(120.60000000000001deg);
  transform: rotate(120.60000000000001deg);
}
.RadialLoader[data-progress="67"] .circle .fill.fix {
  -webkit-transform: rotate(241.20000000000002deg);
  -ms-transform: rotate(241.20000000000002deg);
  transform: rotate(241.20000000000002deg);
}
.RadialLoader[data-progress="67"] .inset .percentage .numbers {
  width: 3876px;
}
.RadialLoader[data-progress="68"] .circle .mask.full,
.RadialLoader[data-progress="68"] .circle .fill {
  -webkit-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.RadialLoader[data-progress="68"] .circle .fill.fix {
  -webkit-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.RadialLoader[data-progress="68"] .inset .percentage .numbers {
  width: 3933px;
}
.RadialLoader[data-progress="69"] .circle .mask.full,
.RadialLoader[data-progress="69"] .circle .fill {
  -webkit-transform: rotate(124.2deg);
  -ms-transform: rotate(124.2deg);
  transform: rotate(124.2deg);
}
.RadialLoader[data-progress="69"] .circle .fill.fix {
  -webkit-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.RadialLoader[data-progress="69"] .inset .percentage .numbers {
  width: 3990px;
}
.RadialLoader[data-progress="70"] .circle .mask.full,
.RadialLoader[data-progress="70"] .circle .fill {
  -webkit-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  transform: rotate(126deg);
}
.RadialLoader[data-progress="70"] .circle .fill.fix {
  -webkit-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  transform: rotate(252deg);
}
.RadialLoader[data-progress="70"] .inset .percentage .numbers {
  width: 4047px;
}
.RadialLoader[data-progress="71"] .circle .mask.full,
.RadialLoader[data-progress="71"] .circle .fill {
  -webkit-transform: rotate(127.8deg);
  -ms-transform: rotate(127.8deg);
  transform: rotate(127.8deg);
}
.RadialLoader[data-progress="71"] .circle .fill.fix {
  -webkit-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.RadialLoader[data-progress="71"] .inset .percentage .numbers {
  width: 4104px;
}
.RadialLoader[data-progress="72"] .circle .mask.full,
.RadialLoader[data-progress="72"] .circle .fill {
  -webkit-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.RadialLoader[data-progress="72"] .circle .fill.fix {
  -webkit-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.RadialLoader[data-progress="72"] .inset .percentage .numbers {
  width: 4161px;
}
.RadialLoader[data-progress="73"] .circle .mask.full,
.RadialLoader[data-progress="73"] .circle .fill {
  -webkit-transform: rotate(131.4deg);
  -ms-transform: rotate(131.4deg);
  transform: rotate(131.4deg);
}
.RadialLoader[data-progress="73"] .circle .fill.fix {
  -webkit-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.RadialLoader[data-progress="73"] .inset .percentage .numbers {
  width: 4218px;
}
.RadialLoader[data-progress="74"] .circle .mask.full,
.RadialLoader[data-progress="74"] .circle .fill {
  -webkit-transform: rotate(133.20000000000002deg);
  -ms-transform: rotate(133.20000000000002deg);
  transform: rotate(133.20000000000002deg);
}
.RadialLoader[data-progress="74"] .circle .fill.fix {
  -webkit-transform: rotate(266.40000000000003deg);
  -ms-transform: rotate(266.40000000000003deg);
  transform: rotate(266.40000000000003deg);
}
.RadialLoader[data-progress="74"] .inset .percentage .numbers {
  width: 4275px;
}
.RadialLoader[data-progress="75"] .circle .mask.full,
.RadialLoader[data-progress="75"] .circle .fill {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.RadialLoader[data-progress="75"] .circle .fill.fix {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.RadialLoader[data-progress="75"] .inset .percentage .numbers {
  width: 4332px;
}
.RadialLoader[data-progress="76"] .circle .mask.full,
.RadialLoader[data-progress="76"] .circle .fill {
  -webkit-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.RadialLoader[data-progress="76"] .circle .fill.fix {
  -webkit-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.RadialLoader[data-progress="76"] .inset .percentage .numbers {
  width: 4389px;
}
.RadialLoader[data-progress="77"] .circle .mask.full,
.RadialLoader[data-progress="77"] .circle .fill {
  -webkit-transform: rotate(138.6deg);
  -ms-transform: rotate(138.6deg);
  transform: rotate(138.6deg);
}
.RadialLoader[data-progress="77"] .circle .fill.fix {
  -webkit-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.RadialLoader[data-progress="77"] .inset .percentage .numbers {
  width: 4446px;
}
.RadialLoader[data-progress="78"] .circle .mask.full,
.RadialLoader[data-progress="78"] .circle .fill {
  -webkit-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.RadialLoader[data-progress="78"] .circle .fill.fix {
  -webkit-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.RadialLoader[data-progress="78"] .inset .percentage .numbers {
  width: 4503px;
}
.RadialLoader[data-progress="79"] .circle .mask.full,
.RadialLoader[data-progress="79"] .circle .fill {
  -webkit-transform: rotate(142.20000000000002deg);
  -ms-transform: rotate(142.20000000000002deg);
  transform: rotate(142.20000000000002deg);
}
.RadialLoader[data-progress="79"] .circle .fill.fix {
  -webkit-transform: rotate(284.40000000000003deg);
  -ms-transform: rotate(284.40000000000003deg);
  transform: rotate(284.40000000000003deg);
}
.RadialLoader[data-progress="79"] .inset .percentage .numbers {
  width: 4560px;
}
.RadialLoader[data-progress="80"] .circle .mask.full,
.RadialLoader[data-progress="80"] .circle .fill {
  -webkit-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  transform: rotate(144deg);
}
.RadialLoader[data-progress="80"] .circle .fill.fix {
  -webkit-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  transform: rotate(288deg);
}
.RadialLoader[data-progress="80"] .inset .percentage .numbers {
  width: 4617px;
}
.RadialLoader[data-progress="81"] .circle .mask.full,
.RadialLoader[data-progress="81"] .circle .fill {
  -webkit-transform: rotate(145.8deg);
  -ms-transform: rotate(145.8deg);
  transform: rotate(145.8deg);
}
.RadialLoader[data-progress="81"] .circle .fill.fix {
  -webkit-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.RadialLoader[data-progress="81"] .inset .percentage .numbers {
  width: 4674px;
}
.RadialLoader[data-progress="82"] .circle .mask.full,
.RadialLoader[data-progress="82"] .circle .fill {
  -webkit-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.RadialLoader[data-progress="82"] .circle .fill.fix {
  -webkit-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.RadialLoader[data-progress="82"] .inset .percentage .numbers {
  width: 4731px;
}
.RadialLoader[data-progress="83"] .circle .mask.full,
.RadialLoader[data-progress="83"] .circle .fill {
  -webkit-transform: rotate(149.4deg);
  -ms-transform: rotate(149.4deg);
  transform: rotate(149.4deg);
}
.RadialLoader[data-progress="83"] .circle .fill.fix {
  -webkit-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.RadialLoader[data-progress="83"] .inset .percentage .numbers {
  width: 4788px;
}
.RadialLoader[data-progress="84"] .circle .mask.full,
.RadialLoader[data-progress="84"] .circle .fill {
  -webkit-transform: rotate(151.20000000000002deg);
  -ms-transform: rotate(151.20000000000002deg);
  transform: rotate(151.20000000000002deg);
}
.RadialLoader[data-progress="84"] .circle .fill.fix {
  -webkit-transform: rotate(302.40000000000003deg);
  -ms-transform: rotate(302.40000000000003deg);
  transform: rotate(302.40000000000003deg);
}
.RadialLoader[data-progress="84"] .inset .percentage .numbers {
  width: 4845px;
}
.RadialLoader[data-progress="85"] .circle .mask.full,
.RadialLoader[data-progress="85"] .circle .fill {
  -webkit-transform: rotate(153deg);
  -ms-transform: rotate(153deg);
  transform: rotate(153deg);
}
.RadialLoader[data-progress="85"] .circle .fill.fix {
  -webkit-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  transform: rotate(306deg);
}
.RadialLoader[data-progress="85"] .inset .percentage .numbers {
  width: 4902px;
}
.RadialLoader[data-progress="86"] .circle .mask.full,
.RadialLoader[data-progress="86"] .circle .fill {
  -webkit-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.RadialLoader[data-progress="86"] .circle .fill.fix {
  -webkit-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.RadialLoader[data-progress="86"] .inset .percentage .numbers {
  width: 4959px;
}
.RadialLoader[data-progress="87"] .circle .mask.full,
.RadialLoader[data-progress="87"] .circle .fill {
  -webkit-transform: rotate(156.6deg);
  -ms-transform: rotate(156.6deg);
  transform: rotate(156.6deg);
}
.RadialLoader[data-progress="87"] .circle .fill.fix {
  -webkit-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.RadialLoader[data-progress="87"] .inset .percentage .numbers {
  width: 5016px;
}
.RadialLoader[data-progress="88"] .circle .mask.full,
.RadialLoader[data-progress="88"] .circle .fill {
  -webkit-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.RadialLoader[data-progress="88"] .circle .fill.fix {
  -webkit-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.RadialLoader[data-progress="88"] .inset .percentage .numbers {
  width: 5073px;
}
.RadialLoader[data-progress="89"] .circle .mask.full,
.RadialLoader[data-progress="89"] .circle .fill {
  -webkit-transform: rotate(160.20000000000002deg);
  -ms-transform: rotate(160.20000000000002deg);
  transform: rotate(160.20000000000002deg);
}
.RadialLoader[data-progress="89"] .circle .fill.fix {
  -webkit-transform: rotate(320.40000000000003deg);
  -ms-transform: rotate(320.40000000000003deg);
  transform: rotate(320.40000000000003deg);
}
.RadialLoader[data-progress="89"] .inset .percentage .numbers {
  width: 5130px;
}
.RadialLoader[data-progress="90"] .circle .mask.full,
.RadialLoader[data-progress="90"] .circle .fill {
  -webkit-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  transform: rotate(162deg);
}
.RadialLoader[data-progress="90"] .circle .fill.fix {
  -webkit-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  transform: rotate(324deg);
}
.RadialLoader[data-progress="90"] .inset .percentage .numbers {
  width: 5187px;
}
.RadialLoader[data-progress="91"] .circle .mask.full,
.RadialLoader[data-progress="91"] .circle .fill {
  -webkit-transform: rotate(163.8deg);
  -ms-transform: rotate(163.8deg);
  transform: rotate(163.8deg);
}
.RadialLoader[data-progress="91"] .circle .fill.fix {
  -webkit-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.RadialLoader[data-progress="91"] .inset .percentage .numbers {
  width: 5244px;
}
.RadialLoader[data-progress="92"] .circle .mask.full,
.RadialLoader[data-progress="92"] .circle .fill {
  -webkit-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.RadialLoader[data-progress="92"] .circle .fill.fix {
  -webkit-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.RadialLoader[data-progress="92"] .inset .percentage .numbers {
  width: 5301px;
}
.RadialLoader[data-progress="93"] .circle .mask.full,
.RadialLoader[data-progress="93"] .circle .fill {
  -webkit-transform: rotate(167.4deg);
  -ms-transform: rotate(167.4deg);
  transform: rotate(167.4deg);
}
.RadialLoader[data-progress="93"] .circle .fill.fix {
  -webkit-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.RadialLoader[data-progress="93"] .inset .percentage .numbers {
  width: 5358px;
}
.RadialLoader[data-progress="94"] .circle .mask.full,
.RadialLoader[data-progress="94"] .circle .fill {
  -webkit-transform: rotate(169.20000000000002deg);
  -ms-transform: rotate(169.20000000000002deg);
  transform: rotate(169.20000000000002deg);
}
.RadialLoader[data-progress="94"] .circle .fill.fix {
  -webkit-transform: rotate(338.40000000000003deg);
  -ms-transform: rotate(338.40000000000003deg);
  transform: rotate(338.40000000000003deg);
}
.RadialLoader[data-progress="94"] .inset .percentage .numbers {
  width: 5415px;
}
.RadialLoader[data-progress="95"] .circle .mask.full,
.RadialLoader[data-progress="95"] .circle .fill {
  -webkit-transform: rotate(171deg);
  -ms-transform: rotate(171deg);
  transform: rotate(171deg);
}
.RadialLoader[data-progress="95"] .circle .fill.fix {
  -webkit-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  transform: rotate(342deg);
}
.RadialLoader[data-progress="95"] .inset .percentage .numbers {
  width: 5472px;
}
.RadialLoader[data-progress="96"] .circle .mask.full,
.RadialLoader[data-progress="96"] .circle .fill {
  -webkit-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.RadialLoader[data-progress="96"] .circle .fill.fix {
  -webkit-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.RadialLoader[data-progress="96"] .inset .percentage .numbers {
  width: 5529px;
}
.RadialLoader[data-progress="97"] .circle .mask.full,
.RadialLoader[data-progress="97"] .circle .fill {
  -webkit-transform: rotate(174.6deg);
  -ms-transform: rotate(174.6deg);
  transform: rotate(174.6deg);
}
.RadialLoader[data-progress="97"] .circle .fill.fix {
  -webkit-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.RadialLoader[data-progress="97"] .inset .percentage .numbers {
  width: 5586px;
}
.RadialLoader[data-progress="98"] .circle .mask.full,
.RadialLoader[data-progress="98"] .circle .fill {
  -webkit-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.RadialLoader[data-progress="98"] .circle .fill.fix {
  -webkit-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.RadialLoader[data-progress="98"] .inset .percentage .numbers {
  width: 5643px;
}
.RadialLoader[data-progress="99"] .circle .mask.full,
.RadialLoader[data-progress="99"] .circle .fill {
  -webkit-transform: rotate(178.20000000000002deg);
  -ms-transform: rotate(178.20000000000002deg);
  transform: rotate(178.20000000000002deg);
}
.RadialLoader[data-progress="99"] .circle .fill.fix {
  -webkit-transform: rotate(356.40000000000003deg);
  -ms-transform: rotate(356.40000000000003deg);
  transform: rotate(356.40000000000003deg);
}
.RadialLoader[data-progress="99"] .inset .percentage .numbers {
  width: 5700px;
}
.RadialLoader[data-progress="100"] .circle .mask.full,
.RadialLoader[data-progress="100"] .circle .fill {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.RadialLoader[data-progress="100"] .circle .fill.fix {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.RadialLoader[data-progress="100"] .inset .percentage .numbers {
  width: 5757px;
}