Как создать пользовательский загрузочный круг CSS3?

Question

Я хочу создать CSS3 загрузки круг, как этот:

внутренний круг будет расти с помощью таймера.

проблема, какова техника, которую я могу использовать для выращивания внутреннего круга таким образом?

У меня есть этот CSS код:

.circle { 
width:100px; 
height:100px; 
border-radius:50px; 
background:#fff; 
} 

.circle является просто div

внешний круг может быть использован в качестве фонового изображения, потому что это будет статическим. он никогда не изменится, только внутренний изменится в соответствии с таймером.

Answer 1

<style> 
#floatingCirclesG{ 
position:relative; 
width:128px; 
height:128px; 
-moz-transform:scale(0.6); 
-webkit-transform:scale(0.6); 
-ms-transform:scale(0.6); 
-o-transform:scale(0.6); 
transform:scale(0.6); 
} 

.f_circleG{ 
position:absolute; 
background-color:#FFFFFF; 
height:23px; 
width:23px; 
-moz-border-radius:12px; 
-moz-animation-name:f_fadeG; 
-moz-animation-duration:1.04s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-direction:linear; 
-webkit-border-radius:12px; 
-webkit-animation-name:f_fadeG; 
-webkit-animation-duration:1.04s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:linear; 
-ms-border-radius:12px; 
-ms-animation-name:f_fadeG; 
-ms-animation-duration:1.04s; 
-ms-animation-iteration-count:infinite; 
-ms-animation-direction:linear; 
-o-border-radius:12px; 
-o-animation-name:f_fadeG; 
-o-animation-duration:1.04s; 
-o-animation-iteration-count:infinite; 
-o-animation-direction:linear; 
border-radius:12px; 
animation-name:f_fadeG; 
animation-duration:1.04s; 
animation-iteration-count:infinite; 
animation-direction:linear; 
} 

#frotateG_01{ 
left:0; 
top:52px; 
-moz-animation-delay:0.39s; 
-webkit-animation-delay:0.39s; 
-ms-animation-delay:0.39s; 
-o-animation-delay:0.39s; 
animation-delay:0.39s; 
} 

#frotateG_02{ 
left:15px; 
top:15px; 
-moz-animation-delay:0.52s; 
-webkit-animation-delay:0.52s; 
-ms-animation-delay:0.52s; 
-o-animation-delay:0.52s; 
animation-delay:0.52s; 
} 

#frotateG_03{ 
left:52px; 
top:0; 
-moz-animation-delay:0.65s; 
-webkit-animation-delay:0.65s; 
-ms-animation-delay:0.65s; 
-o-animation-delay:0.65s; 
animation-delay:0.65s; 
} 

#frotateG_04{ 
right:15px; 
top:15px; 
-moz-animation-delay:0.78s; 
-webkit-animation-delay:0.78s; 
-ms-animation-delay:0.78s; 
-o-animation-delay:0.78s; 
animation-delay:0.78s; 
} 

#frotateG_05{ 
right:0; 
top:52px; 
-moz-animation-delay:0.91s; 
-webkit-animation-delay:0.91s; 
-ms-animation-delay:0.91s; 
-o-animation-delay:0.91s; 
animation-delay:0.91s; 
} 

#frotateG_06{ 
right:15px; 
bottom:15px; 
-moz-animation-delay:1.04s; 
-webkit-animation-delay:1.04s; 
-ms-animation-delay:1.04s; 
-o-animation-delay:1.04s; 
animation-delay:1.04s; 
} 

#frotateG_07{ 
left:52px; 
bottom:0; 
-moz-animation-delay:1.17s; 
-webkit-animation-delay:1.17s; 
-ms-animation-delay:1.17s; 
-o-animation-delay:1.17s; 
animation-delay:1.17s; 
} 

#frotateG_08{ 
left:15px; 
bottom:15px; 
-moz-animation-delay:1.3s; 
-webkit-animation-delay:1.3s; 
-ms-animation-delay:1.3s; 
-o-animation-delay:1.3s; 
animation-delay:1.3s; 
} 

@-moz-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-webkit-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-ms-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-o-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

</style> 
<div id="floatingCirclesG"> 
<div class="f_circleG" id="frotateG_01"> 
</div> 
<div class="f_circleG" id="frotateG_02"> 
</div> 
<div class="f_circleG" id="frotateG_03"> 
</div> 
<div class="f_circleG" id="frotateG_04"> 
</div> 
<div class="f_circleG" id="frotateG_05"> 
</div> 
<div class="f_circleG" id="frotateG_06"> 
</div> 
<div class="f_circleG" id="frotateG_07"> 
</div> 
<div class="f_circleG" id="frotateG_08"> 
</div> 
</div> 

Для создания такого загрузчика, вы можете попробовать http://cssload.net/

Answer 2

HTML

В этом первом примере, создать только два DIV и благодаря свойству границы радиуса, они будут иметь форму круга.

<div class="ball"></div> 
<div class="ball1"></div> 

CSS

Для стиля CSS очень просто, просто играть с параметрами для графики вы хотите, что касается анимации просто использовать преобразование: rotateproperty.

.ball { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-top: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 35px #2187e7; 
    width: 50px; 
    height: 50px; 
    margin: 0 auto; 
    -moz-animation: spin .5s infinite linear; 
    -webkit-animation: spin .5s infinite linear; 
} 

.ball1 { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-top: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 15px #2187e7; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -50px; 
    -moz-animation: spinoff .5s infinite linear; 
    -webkit-animation: spinoff .5s infinite linear; 
} 

@-moz-keyframes spin { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(360deg); 
    }; 
} 

@-moz-keyframes spinoff { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(-360deg); 
    }; 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
    }; 
} 

@-webkit-keyframes spinoff { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(-360deg); 
    }; 
} 

Второй пример CSS3 Загрузка анимации Loop HTML

Вторым примером является такой же, как прецедент для разметки, главное отличие вы найдете его в CSS.

<div class="circle"></div> 
<div class="circle1"></div> 

CSS

Просто в этом примере мы будем действовать на вращение, и больше мы вставить анимацию, которая позволит нам иметь эффект импульса. Этот эффект будет активен только в первом круге.

.circle { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-right: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 35px #2187e7; 
    width: 50px; 
    height: 50px; 
    margin: 0 auto; 
    -moz-animation: spinPulse 1s infinite ease-in-out; 
    -webkit-animation: spinPulse 1s infinite linear; 
} 

.circle1 { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-left: 5px solid rgba(0,0,0,0); 
    border-right: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 15px #2187e7; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -50px; 
    -moz-animation: spinoffPulse 1s infinite linear; 
    -webkit-animation: spinoffPulse 1s infinite linear; 
} 

@-moz-keyframes spinPulse { 
    0% { 
     -moz-transform: rotate(160deg); 
     opacity: 0; 
     box-shadow: 0 0 1px #2187e7; 
    } 

    50% { 
     -moz-transform: rotate(145deg); 
     opacity: 1; 
    } 

    100% { 
     -moz-transform: rotate(-320deg); 
     opacity: 0; 
    }; 
} 

@-moz-keyframes spinoffPulse { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(360deg); 
    }; 
} 

@-webkit-keyframes spinPulse { 
    0% { 
     -webkit-transform: rotate(160deg); 
     opacity: 0; 
     box-shadow: 0 0 1px #2187e7; 
    } 

    50% { 
     -webkit-transform: rotate(145deg); 
     opacity: 1; 
    } 

    100% { 
     -webkit-transform: rotate(-320deg); 
     opacity: 0; 
    }; 
} 

@-webkit-keyframes spinoffPulse { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
    }; 
} 

Третий пример CSS3 Загрузка анимации Loop HTML

В этом последнем примере мы находим простой цикл, всплывающий благодаря преобразованию: масштаб имущества. Разметка больше, чем ее предшественники, но это может варьироваться в зависимости от блоков, которые вы хотите вставить.

<div id="block_1" class="barlittle"></div> 
<div id="block_2" class="barlittle"></div> 
<div id="block_3" class="barlittle"></div> 
<div id="block_4" class="barlittle"></div> 
<div id="block_5" class="barlittle"></div> 

CSS

Здесь стиль гораздо проще в обращении, так как мы собираемся предпринять, чтобы применить эффект анимации: задержка свойство каждого блока.

.barlittle { 
    background-color: #2187e7; 
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
    border-left: 1px solid #111; 
    border-top: 1px solid #111; 
    border-right: 1px solid #333; 
    border-bottom: 1px solid #333; 
    width: 10px; 
    height: 10px; 
    float: left; 
    margin-left: 5px; 
    opacity: 0.1; 
    -moz-transform: scale(0.7); 
    -webkit-transform: scale(0.7); 
    -moz-animation: move 1s infinite linear; 
    -webkit-animation: move 1s infinite linear; 
} 

#block_1 { 
    -moz-animation-delay: .4s; 
    -webkit-animation-delay: .4s; 
} 

#block_2 { 
    -moz-animation-delay: .3s; 
    -webkit-animation-delay: .3s; 
} 

#block_3 { 
    -moz-animation-delay: .2s; 
    -webkit-animation-delay: .2s; 
} 

#block_4 { 
    -moz-animation-delay: .3s; 
    -webkit-animation-delay: .3s; 
} 

#block_5 { 
    -moz-animation-delay: .4s; 
    -webkit-animation-delay: .4s; 
} 

@-moz-keyframes move { 
    0% { 
     -moz-transform: scale(1.2); 
     opacity: 1; 
    } 

    100% { 
     -moz-transform: scale(0.7); 
     opacity: 0.1; 
    }; 
} 

@-webkit-keyframes move { 
    0% { 
     -webkit-transform: scale(1.2); 
     opacity: 1; 
    } 

    100% { 
     -webkit-transform: scale(0.7); 
     opacity: 0.1; 
    }; 
} 

Заключение

Я надеюсь, что с этим уроком вы узнали, как создать простой цикл анимации, используя только свойства CSS3.