Loading can be implemented in the following ways

  • Use GIF or iconfont
  • Use the border – the radius
  • Use Canvas, SVG

Border – the radius to realize loading

Draw the loading circle

.loading-css {
    width: 50px; 
    height: 50px;
    display: inline-block;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #409efff;
    border-radius: 50%;
}

<div class="loading-css"></div>
Copy the code

Set the animation

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loading-css {
    animation: loading 0.8s infinite linear; 
}
Copy the code

Understand stroke-Dasharray and stroke-Dashoffset

Stroke-dasharray: used to create dashed lines, followed by array because the values are arrays.

Stroke-dasharray = ’10’, indicating that the dashed line is 10 long and the interval is 10

Stroke-dasharray = ’10, 5′, indicating that the dashed line is 10 long and the interval is 5

Stroke-dasharray = ’20, 10, 5′, indicating that the dashed line is 20 long, the interval is 10, the dashed line is 5 long, and so on

Stroke-dashoffset: offset. This property is a positive offset x to the left and a negative offset X to the right

Stroke-dashoffset =”10″, indicating that the dashed line as a whole has shifted 10 units to the left

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="10" stroke-dashoffset="10" d="M5 20 l215 0" />
  </g>
</svg>
Copy the code

Understand the canvas

First of all, we need to know the difference between width and style.width before using canvas. It is worth noting that the default value is 300*150 when width and height are not written

When width and height are written on the label

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0.0);
    ctx.lineTo(200.100);
    ctx.stroke();
</script>
Copy the code

Width = 100, style. Height = 100, canvas zoom

Assume style size is 100*100, canvas canvas size is 200*100, lineTo(200, 100)

<canvas id="myCanvas" width="200" height="100" style="width: 100px; height: 100px; border:1px solid #c3c3c3;">
</canvas>
Copy the code


200 100 = 200 x \frac{200}{100} = \frac{200}{x}


100 100 = 100 y \frac{100}{100} = \frac{100}{y}

You get the lineTo’s final coordinate is (100, 100).

Width = 300, style. Height = 300, canvas zoom

Assume style size is 300*300, canvas canvas size is 300*150, lineTo(300, 300)

<canvas id="myCanvas" width="300px" height="150px" style="width: 300px; height: 300px; border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas>
Copy the code


300 300 = 300 x \frac{300}{300} = \frac{300}{x}


150 300 = 300 y \frac{150}{300} = \frac{300}{y}

x = 300

y = 600

The final coordinates of the lineTo can be obtained as (300, 600), and lines with width and height above 300 will be hidden

conclusion

  • Canvas. width/canvas.height indicates the actual size of the canvas, which is not visible to us
  • Canvas.style. width/canvas.style.height indicates the final size of the canvas output to the browser that we can see
  • To solve the problem of linear fuzzy after scaling see (solve the problem of canvas drawing fuzzy) [segmentfault.com/a/119000000…].

Began to draw loading

Draw a circle

The circumference is 20 * 2 * 3.14 = 126

.loading-svg {
  margin: auto;
  width: 50px;
  height: 50px;
}
.path {
  stroke: #409eff;
  stroke-width: 2;
}

Copy the code

svg

<svg class="loading-svg">
    <circle
      cx="25"
      cy="25"
      r="20"
      fill="none"
      class="path"
    ></circle>
  </svg>
Copy the code

canvas

Copy the code

Phase one starting position

.path {
  stroke: #409eff;
  stroke-width: 2;
+ stroke-dasharray: 10.116;
+ stroke-dashoffset: -20;
}

Copy the code

The second stage loading most

stroke-dasharray: 95.126;
stroke-dashoffset: -20;
Copy the code

Phase 3 Loading ends

stroke-dasharray: 6.120;
stroke-dashoffset: -120;
Copy the code

Add the final animation

path {
    stroke: #409eff;
    stroke-width: 2;
    stroke-dasharray: 10.116;
    stroke-dashoffset: -20;
+   animation: loading-rotate 1.5 s infinite ease-in-out;
}
@keyframes loading-rotate {
  0% {
    stroke-dasharray: 1.126;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 95.126;
    stroke-dashoffset: -31;
  }
  100% {
    stroke-dasharray: 6.120;
    stroke-dashoffset: -120; }}Copy the code

The final result

reference

The difference between canvas.width and canvas.style.width and the application of canvas.style