Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * recording animation
- */
- @keyframes recording1 {
- 0%,
- 66% {
- border-color: transparent;
- }
- 100% {
- border-top-color: #000;
- border-bottom-color: #000;
- }
- }
- @keyframes recording2 {
- 0%,
- 33% {
- border-color: transparent;
- }
- 66%,
- 100% {
- border-top-color: #000;
- border-bottom-color: #000;
- }
- }
- @keyframes recording3 {
- 0% {
- border-color: transparent;
- }
- 33%,
- 100% {
- border-color: #000;
- }
- }
- .recording {
- display: inline-block;
- position: relative;
- width: 50px;
- height: 50px;
- border: 2px solid #000;
- border-top-color: transparent;
- border-bottom-color: transparent;
- border-radius: 50%;
- animation-name: recording1;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- box-sizing: border-box;
- }
- .recording::after,
- .recording::before {
- content: '';
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- margin: auto;
- box-sizing: border-box;
- border: 2px solid #000;
- border-top-color: transparent ;
- border-bottom-color: transparent;
- border-radius: 50%;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- }
- .recording::before {
- width: 35px;
- height: 35px;
- animation-name: recording2;
- }
- .recording::after {
- width: 25px;
- height: 25px;
- //animation-name: recording3;
- }
Add Comment
Please, Sign In to add comment