| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- .fl-number,
- .fl-number .fl-number-circle-container {
- margin: 0 auto;
- }
- .fl-number-before-text,
- .fl-number-after-text {
- display: block;
- }
- .fl-number-before-text { margin-bottom: 10px; }
- .fl-number-after-text { margin-top: 10px; }
- .fl-number-string {
- line-height: 1;
- white-space: nowrap;
- overflow: hidden;
- }
- .fl-number .fl-number-text,
- .fl-number .fl-number-circle-container {
- position: relative;
- z-index: 10;
- text-align: center;
- }
- .fl-number.fl-number-bars .fl-number-text { text-align: left; }
- .fl-number .fl-number-bar {
- text-align: right;
- padding: 5px;
- transform: scaleX( 0 );
- transform-origin: center left;
- transition: transform .3s ease-out;
- will-change: transform;
- }
- .fl-number .fl-number-bar-container {
- width: 100%;
- }
- .fl-number .fl-number-position-above .fl-number-bar {
- margin-top: 5px;
- }
- .fl-number .fl-number-position-below .fl-number-bar {
- margin-bottom: 5px;
- }
- .fl-number .svg-container {
- display: inline-block;
- position: relative;
- z-index: 1;
- width: 100%;
- height: auto;
- padding-bottom: 100%;
- }
- .fl-number .svg-container .svg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .fl-number .svg-container .fl-bar {
- transition: stroke-dashoffset 1s ease-out;
- will-change: stroke-dashoffset;
- }
|