markdown CSS3ローディング

Posted 2021-05-06

html,
body {
    height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  width: 65px;
  height: 65px;
  background: linear-gradient(white, white),
  linear-gradient(90deg, rgb(194,107,163) 0%, rgb(142,114,155) 53%, rgb(108,92,140) 100%);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: load 1s linear 0s infinite;
}
span:after {
  position: relative;
  top: 0;
  left: -53px;
  content: attr(data-text)"";
  font-weight: bold;
  font-size: 16px;
  color: #800080;
}

@keyframes load {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

<div class="loading"></div>
<span data-text="Co"></span>
<p>Now Loading...</p>

CSS3 ローディング
-----------


A [Pen](https://codepen.io/di_coder/pen/mjadaw) by [di_coder](https://codepen.io/di_coder) on [CodePen](https://codepen.io).

[License](https://codepen.io/di_coder/pen/mjadaw/license).