Pure CSS realizes circular progress loading and numerical change

CSS counting function (counter)

The counter function returns a string representing the current value of the counter. Accepts two parameters, a name and a count style. Counter (name,styleName),name is case sensitive and identifies as the name representing the current counter. The styleName argument is optional and represents the type of incrementing digits or letters. The accepted arguments are the type supported by list-style type. Commonly used are the following:

Disc (solid dot) circle (square) Decimal (Arabic number 12345... Lower-roman (Roman numerals I, II, iii...) Upper-roman (Roman numerals I, II, III, IV...) A: Simp-Chinese-english (informal) a: two, three,.... 59,) Simp-Chinese-formal Lower-latin (lower-latin abcd...) Upper-latin (uppercase ABCD....)Copy the code

counter-increment

With this property, a counter can increment (or decrement) a value, which can be positive or negative. If no number value is provided, the default is 1. Note: The count cannot be increased if “display: None “is used. If you use “visibility: hidden”, increase the count.

HTML part

<template>
    <div class="container">
        <div class="loading"></div>
    </div>
</template>
Copy the code

The CSS part

  $color: #e91e63
.container
    position: relative
    overflow: hidden
    width: 124px
    height: 124px
    overflow: hidden
    margin: 100px auto
    border-radius: 50%
    background: black
    .loading 
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 120px
        height: 120px
        line-height: 120px
        border-radius: 50%
        color: #fff
        font-size: 20px
        cursor: pointer
        box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color,-60px 60px 0 2px $color, 60px 60px 0 2px$color text-align: center // add counter increment: scale0
        &:hover
            animation: shadow .5sEase forwards &::before // Values behind scalecounter-increment content:counter(scale,decimal)The '%'             
            display: inline-block
@keyframes shadow
  0% 
    box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent
    counter-increment: scale 0
  25% 
    box-shadow: 0 -125px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
    counter-increment: scale 25
  50% 
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
    counter-increment: scale 50
  75% 
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
    counter-increment: scale 75
  100%
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 120px 40px 0 2px $color, 0 0 0 2px #fff
    counter-increment: scale 100
Copy the code

Past pure text

Implementation of no rules screenshot
Hand touch simple render function
Vue simple implementation of LED digital clock (upgraded version)

Pure CSS realizes circular progress loading and numerical change