Pure css for Apple dial Animation

Pure css for Apple dial Animation

 

With the mass production of Apple tables, I think it is time to use CSS to implement dial-up animation.

In this article, we will usekeyframeAnimation and a little trick to achieve the apple dial progress bar animation.

Demo

The final result is as follows:

See the Pen Apple Watch Activity Dials CSS by Helkyle (@ HelKyle) on CodePen.

Dial progress bar

The table animation consists of three lines, each of which is a progress bar. There are rounded corners on both sides of the progress bar. We will use a few tips.

Let's draw a half circle first. The HTML code is as follows:

 

We useborder-radiusAttributes andkeyframeTo achieve a half-month shape and rotation animation.
(Gif image)

.wedge {  animation: rotate 4s infinite linear;  border-radius: 0 4em 4em 0;  background: red;  width: 2em;  height: 4em;  transform-origin: 0% 50%;}@keyframes rotate {  100% {    transform: rotateZ(360deg);  }}

Mask

As usual, I may use CSS3clipAttribute. However, due to browser kernel compatibility issues, I decided to give up. Here, we useoverflow:hiddenThat's enough.

Two elements are used here,dial-containerOnlywedgeAnd it is setoverflowIshidden, The container is positioned on the right of the semi-circle and rotatedwedgeIn this way, the slice effect is displayed.

.dial-container {  position: absolute;  top: 0;  left: 2em;  width: 2em;  height: 4em;  overflow: hidden;}

To draw the entire circle, we need to create the secondwedgeAnd the secondcontainerTo the left.

Entire circle

I usedwrapperTo give twocontainersLocate.

And use the following css to process their positional relationships.

.wrapper {  position: absolute;  width: 4em;  height: 4em;  left: calc(50% - 2em);}.dial-container {  position: absolute;  top: 0;  bottom: 0;  overflow: hidden;  width: 2em;}.wedge {  background: red;  height: 4em;  width: 2em;}.container1 {  left: 2em;}.container1 .wedge {  animation: rotate-bg-1 4s infinite linear;  border-radius: 0 4em 4em 0;  left: 0;  transform-origin: 0 50%;}.container2 {  left: 0;}.container2 .wedge {  animation: rotate-bg-2 4s infinite linear;  border-radius: 4em 0 0 4em;  transform-origin: 2em 2em;}/* First animation moves 180 degrees in the first 2 seconds */@keyframes rotate-bg-1 {  50%, 100% {    transform: rotateZ(180deg);  }}/* Second animation moves 180 degrees in the last 2 seconds */@keyframes rotate-bg-2 {  0%, 50% {    transform: rotateZ(0);  }  100% {    transform: rotateZ(180deg);  }}

Running result:

Progress

The next step iswedgeThe progress bar. We can use a pseudo class to draw a circle in the middle to hide it.

.wrapper::after {  content: ;  background: #fff;  border-radius: 50%;  width: 3em;  height: 3em;  position: absolute;  top: 0.5em;  left: 0.5em;} 

It looks like a progress bar.

Edge Processing

The apple table animation looks soft and is related to its rounded corners. To create such a rounded cornerwegetCss attributes cannot be used. However, we can use tips.

startElement andendTwo redundant elements are used to place the elements at the beginning and end of the progress bar (this generates a rounded corner !)

.marker {  background: green;  border-radius: 50%;  height: 0.5em;  width: 0.5em;  position: absolute;  top: 0;  left: calc(50% - 0.25em);}.end {  animation: rotate-marker 4s infinite linear;  transform-origin: 50% 2em;}@keyframes rotate-marker {  100% {    transform: rotateZ(360deg);  }}

The above cssendCircle to green. Andtransform-originSet to container midpoint.

Integrated

The three progress bars are integrated to generate an animation for the Apple table. Cool?