counting CSS

counting-css.markdown

counting CSS

A Pen by Dylan Rosario on CodePen.

License.

index.html

<div id="counter"></div>

<div class="footer">
   
   <button id="copy">hack attempts</button>
   <input id="minified" type="checkbox" class="switch">
   <label for="minified">Minify Code</label>

</div>

script.js

document.getElementById("copy").onclick = function(){
   
   this.classList.remove("copied");
  
   let code = this.getRootNode().getElementsByTagName("style")[0].innerHTML;
       code = code.substring( 0, code.indexOf("#"));
   
   if(document.getElementById("minified").checked == true){
       code = code.replace(/\s+/g,"");
   }

   navigator.clipboard.writeText( code ).then(function() {
      console.log('Async: Copying to clipboard was successful!');
      
      document.getElementById("copy").classList.add("copied");
      
   }, function(err) {
      console.error('Async: Could not copy text: ', err);
   });
   
};

style.sass

// ------------------------------------------------------------------------------------ //
// Settings for Counting Animation, Change Below here
// ------------------------------------------------------------------------------------ //
$start: 340                // number to start counting from
$end: 100000            // number to end counting at
$steps: 100000             // counting steps
$decimals: 0             // number of decimals displayed, 0 for whole numbers
$decimalsSeperator: ","  // if decimals are bigger than 0, a dot is the standard seperator 
$divider: ','             // empty string for no thousands seperator

$time: 10000s               // ONLY FOR PREVIEW, duration
// ------------------------------------------------------------------------------------ //
// DO NOT CHANGE ANYTHING BELOW HERE
// ------------------------------------------------------------------------------------ //

























@function decimal-round($num, $digits)
   $n: 1
   @if $digits > 0 
      @for $i from 1 through $digits 
         $n: $n * 10
   @return round($num * $n) / $n
      
    
@function str-replace($string, $search, $replace: '')
   $string: '' + $string
   $index: str-index($string, $search)
   @if $index 
      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
   @return $string

@function split-str($number) 
   $number: '' +$number
   $length: str-length($number) 
   @if $decimals > 0
      $length: $length - $decimals - str-length($decimalsSeperator)
   $i: 3
   @while $i < $length 
      $number: str-insert($number, $divider, $length + 1 - $i)
      $i: $i + 3
   @return $number


@keyframes counter
   @for $i from 0 through $steps
      #{$i/($steps/100)}%

         $number: decimal-round($start + ($end - $start) / $steps  * $i, $decimals)
         
         @if $decimalsSeperator != "."
            $number: str-replace($number, ".", $decimalsSeperator)
      
         @if $divider != ""
            $number: split-str($number)

         content: "#{$number}"
         
   



#counter:before
   content: "#{$end}"
   animation: counter $time forwards
   display: block
   
body 
   overflow: hidden
   background: #000
   display: flex
   color: #fff
   justify-content: center
   align-items: center
   height: 100vh
   font:
      family: sans-serif
      weight: bolder
      size: 10rem
.footer
   position: absolute
   bottom: 3rem
   display: block
   background: #222
   border-radius: 2rem
   height: 3rem
   padding-right: 1rem
   font:
      family: sans-serif
      weight: lighter
      size: 1rem
   
   label
      padding: 0 3rem 0 1rem
   .info
      position: absolute
      opacity: 0.3
      text-align: center
      width: 100%
      bottom: -2.75rem
      
@keyframes fadeOut
   0%
      opacity: 1
   100%
      opacity: 0
   
#copy
   cursor: pointer
   position: relative
   background: #fff
   border: none
   border-radius: 2rem
   height: 3rem
   box-sizing: border-box
   padding: 0 2rem
   
   text-transform: uppercase
   outline: none
   overflow: hidden
   font:
      family: sans-serif
      weight: bold
      size: 1rem
   &:after
      width: 100%
      height: 100%
      position: absolute
      background: #9b3
      top: 0
      left: 0
      display: block
      content: "✔ Code Copied!"
      line-height: 3rem
      color: #fff
      overflow:hidden
      transition: all 200ms ease-in-out
      transform: scale(0)
   
   &.copied:after
      transform: scale(1)
      animation: fadeOut 200ms 1s ease-in-out forwards
label
   cursor: pointer
.switch
   display: none
.switch + label
   position: relative
   display: inline-block
   padding-right: 60px
   
   &:before,
   &:after
      content: ''
      display: block
      position: absolute
      top: 50%
      transition: background 200ms ease-in-out
   &:after
      right: 20px
      margin-top: -15px
      width: 30px
      height: 30px
      border-radius: 50%
      background: #ddd
      transition: right 200ms ease-in-out
   &:before
      right: 5px
      margin-top: -10px
      width: 40px
      height: 20px
      border-radius: 25px
      background: #b53
   
.switch:checked + label
   &:after
      right: 0
      
   &:before
      background: #9b3