Css Custom Loader Animation

Question

我的自定义CSS加载器

＆＃13;

＆＃13;

.LoaderWrap {
	width:100%;
	margin-top:25px;
	box-sizing:border-box;
}

.sampleContainer {
	float:left;
	height: 40px;
	width: 100%;
	margin:10px 10px 20px 10px;
	box-sizing:border-box;
}
.loader,
.loader.Large {
	position:absolute;
	left:50%;
	box-sizing:border-box;
}
.dot,
.loader.Large .dot {
  display: inline-block;
  margin-top:20px;
  width: 8px;
  height: 8px;
  -webkit-border-radius:4px;
    -moz-border-radius:4px;
      border-radius: 4px;
  background: #888;
  position: absolute;
  top: 0;  bottom: 0;
  left: 0; right: 0;
}
.loader.Large .dot {
	width: 24px;
	height: 24px;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	  border-radius: 12px;
}

/** Large Dots **/
.loader.Large .dot_1 {
	animation: LargeDot1 1.5s linear infinite;
	left:38px;
}
@keyframes LargeDot1 {
  0% { transform: rotate(0deg) translateX(-38px); }
  25% { transform: rotate(180deg) translateX(-38px); }
  75% { transform: rotate(180deg) translateX(-38px); }
  100% { transform: rotate(360deg) translateX(-38px); }
}

.loader.Large .dot_2 {
	left:76px;
	animation: LargeDot2 1.5s linear infinite;
  	animation-delay: 0.5s;
}
@keyframes LargeDot2 {
  0% { transform: rotate(0deg) translateX(-38px); }
  25% { transform: rotate(-180deg) translateX(-38px); }
  75% { transform: rotate(-180deg) translateX(-38px); }
  100% { transform: rotate(-360deg) translateX(-38px); }
}

.loader.Large .dot_3 {
	left:38px;
	animation: LargeDot3 1.5s linear infinite;
}
@keyframes LargeDot3 {
  0% { transform: rotate(0deg) translateX(38px); }
  25% { transform: rotate(180deg) translateX(38px); }
  75% { transform: rotate(180deg) translateX(38px); }
  100% { transform: rotate(360deg) translateX(38px); }
}

.loader.Large .dot_4 {
	left:76px;
	animation: LargeDot4 1.5s linear infinite;
  	animation-delay: 0.5s;
}
@keyframes LargeDot4 {
  0% { transform: rotate(0deg) translateX(38px); }
  25% { transform: rotate(-180deg) translateX(38px); }
  75% { transform: rotate(-180deg) translateX(38px); }
  100% { transform: rotate(-360deg) translateX(38px); }
}

＆＃13;

<div class="LoaderWrap clearfix">
  <div class="loader Large">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
    <span class="dot dot_4"></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

那有什么不对？

没有什么是错的＆＃39;因此，一定要随意使用这个装载机！但是我想让这个更有趣，例如把点变成星星，甚至可以通过让点（圆圈）变换成不同的形状而更进一步。

尽管我喜欢CSS并认为自己是专家，动画CSS对我来说还是一个新手，而这是我制作的第一个CSS动画，我想让这个更独特，更疯狂的网站主题我正在努力，而不是说我不喜欢这个装载机并要求，称之为提高我的技能？，意味着人们也会使用，但不过，这是一条学习之路！

最小问题：

我怎样才能将myh点（圆圈）作为开头或让我的圆点（圆圈）转换成不同的形状，无论是从基本方块转换为圆形还是使用纯CSS和/或JS / jQuery的？