Created
September 10, 2018 09:33
-
-
Save magicianShiro/99f52fa781ccfe28275707ff45b7e2d4 to your computer and use it in GitHub Desktop.
css绘制没有缝隙的原型进度条
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Page Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| #loading { | |
| width: 100px; | |
| height: 100px; | |
| margin: 30px auto; | |
| position: relative; | |
| } | |
| .outer-shadow, | |
| .inner-shadow, | |
| #timer { | |
| z-index: 6; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 100%; | |
| } | |
| .inner-shadow { | |
| top: 50%; | |
| left: 50%; | |
| width: 80px; | |
| height: 80px; | |
| margin-left: -40px; | |
| margin-top: -40px; | |
| background-color: #fff; | |
| } | |
| #timer { | |
| z-index: 1; | |
| } | |
| .hold { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| clip: rect(0px, 100px, 100px, 50px); | |
| border-radius: 100%; | |
| background-color: #fff; | |
| } | |
| .pie, | |
| .dot span { | |
| background-color: #f50; | |
| } | |
| .pie { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 100%; | |
| clip: rect(0px, 50px, 100px, 0px); | |
| } | |
| #left .pie { | |
| z-index: 1; | |
| animation: left 4s linear both; | |
| } | |
| @keyframes left { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(180deg); | |
| } | |
| } | |
| #right { | |
| z-index: 3; | |
| transform: rotate(180deg); | |
| } | |
| #right .pie { | |
| animation: right 4s linear both; | |
| animation-delay: 4s; | |
| } | |
| @keyframes right { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(180deg); | |
| } | |
| } | |
| .dot { | |
| z-index: 2; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 50%; | |
| height: 10px; | |
| margin-top: -5px; | |
| animation: dot 8s linear both; | |
| transform-origin: 0% 50%; | |
| } | |
| .dot span { | |
| position: absolute; | |
| right: 0; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 100%; | |
| } | |
| @keyframes dot { | |
| 0% { | |
| transform: rotate(-90deg); | |
| } | |
| 50% { | |
| transform: rotate(90deg); | |
| z-index: 4; | |
| } | |
| 100% { | |
| transform: rotate(270deg); | |
| z-index: 4; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='loading'> | |
| <!-- <div class='outer-shadow'></div> --> | |
| <div class='inner-shadow'></div> | |
| <div class='timer'> | |
| <div class='dot'> | |
| <span></span> | |
| </div> | |
| <div class='hold' id='left'> | |
| <div class='pie'></div> | |
| </div> | |
| <div class='hold' id='right'> | |
| <div class='pie'></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment