CSS Kullanarak 3 Nokta Yükleme Animasyonu

KERİM ERBAY · 23 Kas 2023

Bu Blogda CSS Kullanarak 3 Nokta Yükleme Animasyonu Oluşturmayı Öğreniyoruz . 3 Nokta Yükleme Animasyonu İçin HTML ve CSS Kullanıyoruz .

Gerçek içerik görünmeden önce, web siteleri bir yükleme animasyonu oluşturmak için yükleme animasyonu css efektini kullanır. Bu yükleme animasyonları web sitesini daha ilgi çekici hale getirmek için kullanılır. Siteye olan ilgi eksikliğini önlemek adına bu yükleme animasyonları yükleme süresinin çok uzun olduğu durumlarda faydalıdır.

Umarım yazımızı Beğenirsiniz O halde 3 Nokta Yükleme Animasyonu İçin Temel Bir Html Yapısıyla Başlayalım .

Nokta Yükleme İçin Html Kodu

HTML:

<div class="main">
<div class="balls balls-1">
<div class="ball ball--1"></div>
<div class="ball ball--2"></div>
<div class="ball ball--3"></div>
<div class="ball ball--4"></div>
</div>
<div class="balls balls-2">
<div class="ball ball--1"></div>
<div class="ball ball--2"></div>
<div class="ball ball--3"></div>
<div class="ball ball--4"></div>
</div>
</div>

Şimdi nokta yükleme animasyonumuza yapı eklemek için, classmain" ile ana kap olarak kullanacağımız bir div bölümü oluşturacağız ve ardından ana kabın içinde toplar için iki ana div bölümü oluşturacağız ve bunların içinde farklı toplar için alt div bölümleri oluşturacağız.

Şimdi html çıktısına bakarsak boş bir ekran göreceksiniz, böylece yapıyı eklediğimizi göstermek için yapının içine bazı geçici metinler yazacağız.

3 Nokta Yükleme Animasyonunun tüm html kodları mevcuttur. Artık çıktıyı Css olmadan görebilirsiniz. Daha sonra 3 Nokta Yükleme Animasyonunun CSS Kodunu yazıyoruz.

3 Nokta Yükleme Animasyon Css Çıktısı

Boş Html Etiketli Boş Çıktı

Nokta Yüklemek İçin Css Kodu

CSS:

 *{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #191940;
overflow: hidden;
}
.main{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 360px;
height: 100vh;
position: relative;
}
.balls{
display: flex;
height: 100%;
width: 100%;
position: absolute;
}
.ball{
position: absolute;
top: -50px;
width: 50px;
height: 50px;
background: peru;
border-radius: 50%;
margin: 0 20px;
animation: ball 4s infinite;
}
.ball--1{ background-image: linear-gradient(to bottom , #FFE93E, #FF952A);}
.ball--2{ background-image: linear-gradient(to bottom , #FF009E, #FF0038);}
.ball--3{ background-image: linear-gradient(to bottom , #00F4FE, #00BDFB);}
.ball--4{ background-image: linear-gradient(to bottom , #FC00F9, #B500F9);}
.balls-1 .ball--1{ left: 20px; animation-delay: 0; }
.balls-1 .ball--2{ left: 100px; animation-delay: .05s; }
.balls-1 .ball--3{ left: 180px; animation-delay: .1s; }
.balls-1 .ball--4{ left: 260px; animation-delay: .15s; }
.balls-2 .ball--1{ left: 20px; animation-delay: 2s; }
.balls-2 .ball--2{ left: 100px; animation-delay: 2.05s; }
.balls-2 .ball--3{ left: 180px; animation-delay: 2.1s; }
.balls-2 .ball--4{ left: 260px; animation-delay: 2.15s; }
@keyframes ball {
0%, 25%{ top: -50px; }
35%{ top: calc(60% - 50px ); }
40%{ top: calc(45% - 50px ); }
45%{ top: calc(55% - 50px ); }
50%, 70%{ top: calc(50% - 25px); }
80%, 100%{ top: 100%; }
}

Adım 1: Evrensel etiket seçici (*) kullanılarak dolgu ve kenar boşluğu "sıfır" olarak ayarlanacak ve kutu boyutlandırmasını "kenarlık kutusu" olarak ayarlamak için kutu boyutlandırma özelliği kullanılacaktır.

Artık web sayfamızın gövdesinin genişliğini ve yüksekliğini gövde etiketi seçiciyi kullanarak tanımlayacağız. Arka plan rengini “koyu mavi” olarak değiştirmek için arka plan rengi özelliği kullanılacak olup genişlik ve yükseklik sırasıyla “%100” ve “100vh” olarak ayarlanacaktır.

CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #191940;
    overflow: hidden;
}

Adım 2: Şimdi sınıf seçiciyi kullanarak ana konteynerimize stil uygulayacağız. (.ana). Görüntüyü "esnek" hale getirmek için display özelliğini kullanacağız ve onu ortalamak için öğeleri hizalamak gibi bazı temel özellikleri kullanacağız. Boyutlar genişlik için “360 px” ve yükseklik için “100 vh”dir.

Şimdi topu tasarlayıp animasyonumuza uygulayacağız. Border radius özelliğinin yardımıyla konumu mutlak, genişliği ve yüksekliği 50px, görüntüleme tipini ise flex olarak ayarlayarak toplara yuvarlak bir görünüm kazandırdık.

Artık her top için sınıf seçiciyi ve arka plan görüntüsü özelliğini kullanarak toplarımızın her birine ayrı ayrı farklı bir doğrusal degrade ve farklı bir renk ekleyeceğiz.

CSS:

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 360px;
    height: 100vh;
    position: relative;
}

.balls {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
}

.ball {
    position: absolute;
    top: -50px;
    width: 50px;
    height: 50px;
    background: peru;
    border-radius: 50%;
    margin: 0 20px;
    animation: ball 4s infinite;
}

.ball--1 {
    background-image: linear-gradient(to bottom, #FFE93E, #FF952A);
}

.ball--2 {
    background-image: linear-gradient(to bottom, #FF009E, #FF0038);
}

.ball--3 {
    background-image: linear-gradient(to bottom, #00F4FE, #00BDFB);
}

.ball--4 {
    background-image: linear-gradient(to bottom, #FC00F9, #B500F9);
}

Adım 3: Şimdi her topu seçerek toplarımıza animasyon ekleyeceğiz ve ardından animasyon-delay özelliğini kullanarak projemizde yeni bir desen oluşturmak için her topa küçük bir gecikme ekleyeceğiz ve ardından ana kareleri kullanacağız. Bir yükleme animasyonu projesi oluşturmak için topumuza farklı anahtar kareler ekleyeceğiz.

CSS:

.balls-1 .ball--1 {
    left: 20px;
    animation-delay: 0;
}

.balls-1 .ball--2 {
    left: 100px;
    animation-delay: .05s;
}

.balls-1 .ball--3 {
    left: 180px;
    animation-delay: .1s;
}

.balls-1 .ball--4 {
    left: 260px;
    animation-delay: .15s;
}

.balls-2 .ball--1 {
    left: 20px;
    animation-delay: 2s;
}

.balls-2 .ball--2 {
    left: 100px;
    animation-delay: 2.05s;
}

.balls-2 .ball--3 {
    left: 180px;
    animation-delay: 2.1s;
}

.balls-2 .ball--4 {
    left: 260px;
    animation-delay: 2.15s;
}

@keyframes ball {
    0%,
    25% {
        top: -50px;
    }
    35% {
        top: calc(60% - 50px);
    }
    40% {
        top: calc(45% - 50px);
    }
    45% {
        top: calc(55% - 50px);
    }
    50%,
    70% {
        top: calc(50% - 25px);
    }
    80%,
    100% {
        top: 100%;
    }
}

Artık 3 Nokta Yükleme Animasyonlu Css İçin Css Kod Bölümümüzü Tamamladık. İşte Html ve Css ile Güncellenmiş Son Çıktımız.

Css Kullanarak 3 Nokta Yükleme Animasyonunun Son Çıktısı

3 Nokta Yükleme Animasyon Css

3 Nokta Yükleme Animasyon Css

Artık HTML ve CSS Kullanarak 3 Nokta Yükleme Animasyonumuzu Tamamladık. İşte Html ve Css ile Güncellenmiş Çıktımız. Umarım 3 Nokta Yükleme Animasyon Css'i beğenirsiniz. Çıktı Projesi Ekran Görüntülerini Görebilirsiniz.