locked
How compose animation by css3 for tabular data RRS feed

  • Question

  • User-466819921 posted

    I have page where i am showing master and detail data. detail data shown by html table. when page load then i am fetching data by ajax and populate UI.

    so my plan is i want to do some kind of animation by CSS3 Keyframe like below one.

    see a example

    <div class="animationLoading">
    <div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    </div>
    <div id="four"></div>
    <div id="five"></div>
    <div id="six"></div>
    </div>
    body{
    
    margin:90px auto;
    width: 500px;
    background-color: #e9eaed;
    }
    
    .animationLoading{
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9;
    border-radius: 3px; 
    display: block;
    height: 324px;
    width: 494px;
    padding: 12px;
    }
    @keyframes animate {
    0% {
    background-position: -468px 0
    }
    100% {
    background- 0
    }
    
    }
    
    #container{
    width:100%;
    height:30px;
    }
    #one,#two,#three,#four,#five,#six
    {
    ;
    background-color: #CCC;
    height: 6px;
    animation-name: animate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
    background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    -webkit-background-size: 800px 104px; 
    }
    
    #one{ 
    left:0; 
    height: 40px;
    width: 40px; 
    }
    
    #two{
    left:50px;
    top:-33px;
    width: 25%;
    }
    
    #Three{
    left:50px;
    top:-20px;
    width: 15%;
    }
    
    #four{
    left:0px;
    top:30px;
    width: 80%;
    }
    
    #five{
    left:0px;
    top:45px;
    width: 90%;
    }
    
    #six{
    left:0px;
    top:60px;
    width: 50%;
    }
    

    When data load complete then animation will go away and data will be shown. see my above animation in action. jsfiddle link as follows

    here i attach js fiddle link because other people can understand what kind of animation i am looking for my page UI.

    as i said i have master data and detail data. now tell me how could i apply the above animation for my master and detail data. detail data will be shown by html table. give me a code example.

    Sunday, August 26, 2018 7:35 PM

Answers

  • User283571144 posted

    Hi dev_dona,


    Now animation look like a form but how could i design same animation for html table?

    According to your description, I suggest you could consider using below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            @-webkit-keyframes moving-gradient {
                0% {
                    background-position: -250px 0;
                }
    
                100% {
                    background- 0;
                }
            }
    
            table {
                width: 100%;
            }
    
                table tr {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                }
    
                    table tr td {
                        height: 50px;
                        vertical-align: middle;
                        padding: 8px;
                    }
    
                        table tr td span {
                            display: block;
                        }
    
                        table tr td.td-1 {
                            width: 20px;
                        }
    
                            table tr td.td-1 span {
                                width: 20px;
                                height: 20px;
                            }
    
                        table tr td.td-2 {
                            width: 50px;
                        }
    
                            table tr td.td-2 span {
                                background-color: rgba(0, 0, 0, 0.15);
                                width: 50px;
                                height: 50px;
                            }
    
                        table tr td.td-3 {
                            width: 400px;
                        }
    
                            table tr td.td-3 span {
                                height: 12px;
                                background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
                                background-size: 500px 100px;
                                animation-name: moving-gradient;
                                animation-duration: 1s;
                                animation-iteration-count: infinite;
                                animation-timing-function: linear;
                                animation-fill-mode: forwards;
                            }
    
                        table tr td.td-5 {
                            width: 100px;
                        }
    
                            table tr td.td-5 span {
                                background-color: rgba(0, 0, 0, 0.15);
                                width: 100%;
                                height: 30px;
                            }
    
        </style>
    </head>
    <body>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
          
                </tbody>
            </table>    
        </div>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 4, 2018 7:25 AM

All replies

  • User283571144 posted

    Hi dev_dona,

    When data load complete then animation will go away and data will be shown. see my above animation in action. jsfiddle link as follows

    here i attach js fiddle link because other people can understand what kind of animation i am looking for my page UI.

    as i said i have master data and detail data. now tell me how could i apply the above animation for my master and detail data. detail data will be shown by html table. give me a code example.

    According to your description(I don't find the js fiddle link), I couldn't understand your requirement clearly.

    Besides, I have test the demo css according to your codes.

    The result as below:

    Do you mean that you want to show detailed data after the animation Loading page ?

    If possible, please provide more details so that it will be better for us to help you.

    Best Regards,

    Brando

    Tuesday, August 28, 2018 2:25 AM
  • User-466819921 posted
    I know my css animation code works fine but i like to know if i am showing tabular data then how can i apply the above css to implement for html table.

    If still not clear the issue then let me know.
    Tuesday, August 28, 2018 10:19 AM
  • User283571144 posted

    Hi dev_dona,

    I know my css animation code works fine but i like to know if i am showing tabular data then how can i apply the above css to implement for html table.

    If still not clear the issue then let me know.

    Do you mean you want to show the tabular data after the animation?

    If this is your requirement, I suggest you could refer to below codes:

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    url: "TabularData.aspx/GetInfo",
                    type: "POST",
                    data: '{}',
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var jsonObj1 = JSON.parse(data.d);
                        console.log(data);
                        console.log(jsonObj1);
                        console.log(data.d.length);
                        var employeeTable = $('#tblEmployee tbody');
                        employeeTable.empty();
                        for (var i = 0; i < jsonObj1.length; i++) {
                            employeeTable.append('<tr><td>' + jsonObj1[i].Eid + '</td><td>'
                                + jsonObj1[i].Ename + '</td><td>' + jsonObj1[i].age + '</td><td>' + jsonObj1[i].sex + '</td></tr>');
                        }
                    },
                    error: function (err) {
                        alert(err);
                    }
                })
                $(".showTable").hide();
                setTimeout(function () { $(".animationLoading").hide();$(".showTable").show(); }, 5000);
            })
    
        </script>
        <style>
            body {
                margin: 90px auto;
                width: 500px;
                background-color: #e9eaed;
            }
    
            .animationLoading {
                background: #fff;
                border: 1px solid;
                border-color: #e5e6e9;
                border-radius: 3px;
                display: block;
                height: 324px;
                width: 494px;
                padding: 12px;
            }
    
            @keyframes animate {
                0% {
                    background-position: -468px 0
                }
    
                100% {
                    background- 0
                }
            }
    
            #container {
                width: 100%;
                height: 30px;
            }
    
            #one, #two, #three, #four, #five, #six {
                ;
                background-color: #CCC;
                height: 6px;
                animation-name: animate;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
                background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
                background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
                -webkit-background-size: 800px 104px;
            }
    
            #one {
                left: 0;
                height: 40px;
                width: 40px;
            }
    
            #two {
                left: 50px;
                top: -33px;
                width: 25%;
            }
    
            #Three {
                left: 50px;
                top: -20px;
                width: 15%;
            }
    
            #four {
                left: 0px;
               top: 30px;
                width: 80%;
            }
    
            #five {
                left: 0px;
                top: 45px;
                width: 90%;
            }
    
            #six {
                left: 0px;
                top: 60px;
                width: 50%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="animationLoading">
                <div id="container">
                    <div id="one"></div>
                    <div id="two"></div>
                    <div id="three"></div>
                </div>
                <div id="four"></div>
                <div id="five"></div>
                <div id="six"></div>
            </div>
            <div class="showTable">
                <div class="container">
                    <table id="tblEmployee" class="table table-bordered">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th>Eid</th>
                                <th>Ename</th>
                                <th>age</th>
                                <th>sex</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    public class EmployeesInfo
            {
                public string Eid { get; set; }
                public string Ename { get; set; }
                public string age { get; set; }
                public string sex { get; set; }
            }
            [WebMethod]
            public static string GetInfo()
            {
                List<EmployeesInfo> employeelist = new List<EmployeesInfo>();
                
                string constr = ConfigurationManager.ConnectionStrings["EmployeeManagementConnectionString"].ConnectionString;
                using(SqlConnection con=new SqlConnection(constr))
                {
                    string query = "SELECT * FROM tb_info";
                    SqlCommand cmd = new SqlCommand(query,con);
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                        EmployeesInfo employeeInfo = new EmployeesInfo();
                        employeeInfo.Eid = sdr["Eid"].ToString();
                        employeeInfo.Ename = sdr["Ename"].ToString();
                        employeeInfo.age = sdr["age"].ToString();
                        employeeInfo.sex = sdr["sex"].ToString();
                        employeelist.Add(employeeInfo);
                    }
                }
                JavaScriptSerializer js = new JavaScriptSerializer();
                return js.Serialize(employeelist);
            }
    

    Result:

    Best Regards,

    Brando

    Wednesday, August 29, 2018 8:28 AM
  • User-466819921 posted
    No i want animation should look like table.

    Now animation look like a form but how could i design same animation for html table?

    Please provide some example or sample.
    Thursday, August 30, 2018 9:33 AM
  • User283571144 posted

    Hi dev_dona,


    Now animation look like a form but how could i design same animation for html table?

    According to your description, I suggest you could consider using below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            @-webkit-keyframes moving-gradient {
                0% {
                    background-position: -250px 0;
                }
    
                100% {
                    background- 0;
                }
            }
    
            table {
                width: 100%;
            }
    
                table tr {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                }
    
                    table tr td {
                        height: 50px;
                        vertical-align: middle;
                        padding: 8px;
                    }
    
                        table tr td span {
                            display: block;
                        }
    
                        table tr td.td-1 {
                            width: 20px;
                        }
    
                            table tr td.td-1 span {
                                width: 20px;
                                height: 20px;
                            }
    
                        table tr td.td-2 {
                            width: 50px;
                        }
    
                            table tr td.td-2 span {
                                background-color: rgba(0, 0, 0, 0.15);
                                width: 50px;
                                height: 50px;
                            }
    
                        table tr td.td-3 {
                            width: 400px;
                        }
    
                            table tr td.td-3 span {
                                height: 12px;
                                background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
                                background-size: 500px 100px;
                                animation-name: moving-gradient;
                                animation-duration: 1s;
                                animation-iteration-count: infinite;
                                animation-timing-function: linear;
                                animation-fill-mode: forwards;
                            }
    
                        table tr td.td-5 {
                            width: 100px;
                        }
    
                            table tr td.td-5 span {
                                background-color: rgba(0, 0, 0, 0.15);
                                width: 100%;
                                height: 30px;
                            }
    
        </style>
    </head>
    <body>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
                    <tr>
                        <td class="td-1"><span></span></td>
                        <td class="td-2"><span></span></td>
                        <td class="td-3"><span></span></td>
                        <td class="td-4"></td>
                        <td class="td-5"><span></span></td>
                    </tr>
          
                </tbody>
            </table>    
        </div>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 4, 2018 7:25 AM